Here is a snippet of my HTML/CSS/JS code:
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close"><a href="" onclick="toggleClass()">X</a></div>
<ul>
</ul>
<div class="shopping-cart-header">CART</div>
<div class="products-container">
<div class="product">
<span class="prodcut-image"><img src="https://via.placeholder.com/250x100"></span>
<div class="product-details">
<div class="name-header">This is a very long test name</div>
<div class="product-quantity-details">
<span class="quantity">QTY</span>
<span class="color-circle"></span>
<span class="color">COLOR</span>
</div>
<div class="price-open">
<span class="product-price">XX.XX</span>
<span class="product-link"><a href="#">open</a></span>
</div>
</div>
</div>
</div>
<div class="checkout">
<div class="taxes">
<span class="label">Taxes</span>
<span class="value">0</span>
<hr>
</div>
<div class="cart-total">
<span class="label">Total</span>
<span class="value">0</span>
</div>
<button><a href="#">Checkout</a></button>
</div>
</div>
</div>
</div>
Here is the relevant CSS code:
.cart-preview {
float: right;
position: relative;
}
(cart-preview styles...)
.cart-preview .body .checkout>hr {
margin-top: 30px;
margin-left: auto;
margin-right: auto;
border-color: black;
}
(rest of CSS styling...)
Here is the JavaScript function used:
function toggleClass() {
document.getElementById('shopping-cart-body').classList.toggle('open');
}
I want to position the <hr> within the checkout class div such that it is centered vertically between the Taxes and Total elements. I tried using height: 50% and top: 50%, but it didn't work. You can view the codepen with my code here:
https://codepen.io/anon/pen/EeyEPg
Update:
I figured out how to achieve the desired effect with a new div. I need to align this new div between the two existing divs, so I made updates to the codepen.