.dd{
height:100px;
width:100%;
border:1px soild red;
background:#000;
}
.dd .d1{
height:20px;
width:20px;
border:1px solid green;
display:inline-block;
}
.dd .d2{
height:20px;
width:20px;
border:1px solid green;
display:inline-block;
}
.dd .d3{
height:40px;
width:30px;
border:1px solid yellow;
display:inline-block;
}<div class="dd">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>Struggling with aligning elements vertically in my project, I'm seeking advice or a better approach. My current method involves setting equal margin-top and margin-bottom when the outer div does not have a set height, achieving a vertical alignment. However, I am open to learning a more effective technique.
Recently, I updated my approach by changing the height value from 50px to 80px in the CSS for innerDivs, only to realize that the adjustment was not effective. My main goal is to center the innerDivs vertically within the fixed-height outer div by making their margin-top and margin-bottom equal. If anyone has a better solution or can provide further explanation, I would greatly appreciate it.