How can I use CSS to center multiple divs with varying heights within a parent div?

Question

How can I use CSS to center multiple divs with varying heights within a parent div?

Consider the HTML code provided below:

<!DOCTYPE html>
<html>
<body>

<div id="parent" style="border:1px solid #666;width:600px;height:200px;padding:5px;">
<div id="child1" style="border:1px solid #666;float:left;margin-left:10px;display:inline-block;">How<br>are<br>you?</div>
<div id="child2" style="border:1px solid #666;float:left;margin-left:100px;">How are you?</div>
<div id="child3" style="border:1px solid #666;float:right;margin-right:40px;">How are you?<br>How are you?<br>How are you?</div>
</div>

</body>
</html>

Is there a way to align the three child divs in the center of the parent div, as shown in the example screenshot?

https://i.sstatic.net/hpIfq.png

The height of the child divs may vary due to changing text content, making it challenging to use properties like top, margin-top, and position:absolute. Constantly adjusting the values is not feasible. Are there alternative methods to achieve this alignment without fixed heights?

html css

Answer 1

Answer №1

Check out this interactive flexbox design based on your image. I hope it meets your expectations!

Preview:

https://i.sstatic.net/qxbcR.png

See it in action:

#container {
    display: flex;
    justify-content: space-around;
    border:1px solid #222;
    width:500px;
    height:150px;
    padding:10px;
}
.item {
    align-self: center;
}

.item > div {
    display: inline-block;
    border:1px solid #222;
}

<div id="container">
    <div class="item" id="item1"><div>Hello
        <br />there</div></div>
    <div class="item" id="item2"><div>Howdy!</div></div>
    <div class="item" id="item3"><div>Goodbye!
        <br />See ya later!</div></div>
</div>

JSFiddle Example: https://jsfiddle.net/xyz123/

Answer 2

Check out this interactive flexbox design based on your image. I hope it meets your expectations!

Preview:

https://i.sstatic.net/qxbcR.png

See it in action:

#container {
    display: flex;
    justify-content: space-around;
    border:1px solid #222;
    width:500px;
    height:150px;
    padding:10px;
}
.item {
    align-self: center;
}

.item > div {
    display: inline-block;
    border:1px solid #222;
}

<div id="container">
    <div class="item" id="item1"><div>Hello
        <br />there</div></div>
    <div class="item" id="item2"><div>Howdy!</div></div>
    <div class="item" id="item3"><div>Goodbye!
        <br />See ya later!</div></div>
</div>

JSFiddle Example: https://jsfiddle.net/xyz123/

Answer 3

Answer №2

Hey there, I have a new method you can try out:

display: table and display:table-cell attribute as shown below:

#parent{
display:table;
width:100%;
}
#child1, #child2, #child3{
display:table-cell;
vertical-align:middle;
text-align:center;
border:solid 1px red;
width:33%;
}

<div id="parent">
<div id="child1">How<br>are<br>you?</div>
<div id="child2">How are you?</div>
<div id="child3">How are you?<br>How are you?<br>How are you?</div>
</div>

Answer 4

Hey there, I have a new method you can try out:

display: table and display:table-cell attribute as shown below:

#parent{
display:table;
width:100%;
}
#child1, #child2, #child3{
display:table-cell;
vertical-align:middle;
text-align:center;
border:solid 1px red;
width:33%;
}

<div id="parent">
<div id="child1">How<br>are<br>you?</div>
<div id="child2">How are you?</div>
<div id="child3">How are you?<br>How are you?<br>How are you?</div>
</div>

How can I use CSS to center multiple divs with varying heights within a parent div?

Answer №1

Answer №2

Similar questions

Does including the "max-height" property within a table result in a height of zero?

Tips for showcasing a full body height background

Is the text in the React chat application too lengthy causing a bug problem?

Batch Script for Reading and Writing HTML files

Guide to Angular Directives: Assigning Attributes to innerHTML

Struggling with Implementing a Hollow Button in Bootstrap 3

What is causing the CSS3 tabbed area to be restricted?

Consistently ensuring even horizontal CSS padding throughout all components

Unusual marker appearing on every page utilizing ionic v1 and angularjs

Navigating Parent Menus While Submenus are Expanded in React Using Material-UI

What is a more effective option than sharing JSON outcomes?

After the animation finishes, the CSS3 :hover effect ceases to function

Tips for displaying Vue Components on an HTML5 canvas surface

What is the best way to create spacing between images in a CSS image slider?

Problem with personalized Domino login page

How much does it typically cost to implement external libraries into a project?

Position the text on the left side while also centering it within my div

Pictures failing to load on both Chrome and Safari browsers

Align Image According to Dimensions of the Browser

Various results can be produced based on the .load() and .resize() or .scroll() functions despite using the same calculation methods