I'm seeking a solution to the following issue: I have a container div that adjusts its height and width based on a div/img inside it with dynamic height. Inside that container, I want to add another square div measuring 72x72px that will be centered both horizontally and vertically.
A CSS-based solution is preferred.
Thank you for any assistance provided.
Current HTML:
<div class="post">
<div class="post-like"></div>
<img src="dsada"/>
</div>
Current LESS code:
.post:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
background: #808080; width: 5px;
}
.post{
background: @white;
direction: rtl;
overflow: hidden;
width: 42%;
margin-left: 2%;
margin-right: 2%;
margin-top: 4%;
position: relative;
text-align: center;
white-space: nowrap;
}
img{
display: inline-block;
vertical-align: middle;
width: 100%;
}
.post-like {
display: inline-block;
vertical-align: middle;
opacity: 1;
cursor: pointer;
height: 72px;
width: 72px;
border-radius: 50%;
background: rgba(0,0,0,0.7);
}