Within my HTML structure, there is a main div with three child divs. I am aiming to have the second and third child elements (text and button) centered within the parent container.
<div class='border'>
<div class='inline-block some-image'> <!-- background image here --> </div>
<div class='inline-block description'> Some Text</div>
<div class='inline-block button'> <button></button> </div>
<div>
Review of CSS styles:
.border {
border: 1px solid;
}
.inline-block {
display: inline-block;
}
.some-image {
height: 100px;
width: 29%;
display: inline-block;
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
vertical-align: top;
}
.description {
width: 25%;
vertical-align: middle;
}
.button {
width: 25%;
vertical-align: middle;
}
All three div elements are set as inline-block for horizontal alignment, but proper vertical alignment relies on adjusting the vertical-alignment property. When the initial child is vertically aligned in the middle, subsequent children also align correctly.
It raises a question regarding whether all children must be centered vertically or if certain ones can be positioned differently.
View examples illustrating lack of vertical centering: Lacking Vertical Alignment
Example demonstrating successful vertical alignment: Achieving Vertical Centering