I have a project to develop a shopping cart, and I am currently working on aligning my item total in the center of its container. Here is the code snippet I have so far:
.itemInfo {
display: table;
width: 100%;
}
.itemTotal {
display: table-cell;
vertical-align: middle;
text-align: center;
font-weight: bold;
font-size: 1.75em;
float: right;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76141919020502041706364258405846">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h3>Items</h3>
<div class="cart">
<div class="itemInfo">
<img class="itemImg" src="someimg.png">
<p class="itemNumber">#Item-S017-01</p>
<h4>Item Name</h4>
<p><input type="number" class="qty" placeholder="1" min="0"> x $250.00</p>
</div>
<div class="itemTotal >
<p><span>$250.00</span></p>
</div>
</div>
</div>My goal is to achieve a layout where the item total amount (e.g., "$15.00") is perfectly centered as shown here: https://i.sstatic.net/HcH8G.png
I'm fairly new to HTML and struggling with this task. Any assistance or advice would be greatly appreciated! :)