Left, center, and right align divs on bottom of same line

Question

I have three divs that I would like to display on the same line. Each of the three has different widths and heights, and they are not straight text. I'd like to left-align one (all the way to the left), right-align another (all the way to the right), and center the third (in the middle of the containing div, the whole page in this case).

In addition, I'd like the three divs to be vertically aligned to the bottom of the containing div. The solution I have vertically aligns them to the top of the containing div.

What is the best way to handle this?

Answer 1

By setting your container div to position:relative and the child divs to position:absolute you can absolute position the divs within the confines of the container.

This makes it easy, as you can use bottom:0px to align all vertically to the bottom of the container, and then use left/right styling to position along the horizontal axis.

I set up a working jsFiddle: http://jsfiddle.net/Damien_at_SF/KM7sQ/5/ and the code follows:

HTML:

<div id="container">
    <div id="left">left</div>
    <div id="center">center</div>
    <div id="right">right</div>    
</div>

CSS:

#container {
    position:relative;
    height:400px;
    width:100%;
    border:thick solid black;
}
#container div {
    background:grey;
    width:200px;
}
#left {
    position:absolute;
    left:0px;
    bottom:0px;
}
#center {
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:0px;
}
#right {
    position:absolute;
    right:0px;
    bottom:0px;
}

Note: For the "center" div, the margin-left = 1/2 the width of the div :)

Hope that helps :)

Answer 2

My technique is similar to @Damien-at-SF:

I tried to rigorously demonstrate all the requirements you asked for.

Live Demo

HTML:

<div id="container">

    <div id="left"></div>
    <div id="mid"></div>
    <div id="right"></div>

</div>

CSS:

#container {
    position: relative;
    height: 400px;
    width: 80%;
    min-width: 400px;
    margin: 0 auto;

    background: #ccc
}
#left, #right, #mid {
    position: absolute;
    bottom: 0;
}
#left {
    left: 0;
    width: 80px;
    height: 200px;

    background: red
}
#right {
    right: 0;
    width: 120px;
    height: 170px;

    background: blue
}

#mid {
    left:50%;

    margin-left: -80px;
    width: 160px;
    height: 300px;

    background: #f39
}

Answer 3

To make your center div elastic, you could do something like:

<div style="display:table; width:500px;">
  <div style="display:table-row;">
    <div style="display:table-cell; width:50px;"></div>
    <div style="display:table-cell;"></div>
    <div style="display:table-cell; width:50px;"></div>
  </div>
</div>

Answer 4

A further enhancement to the first answer:

In the "center" div CSS, you need to add:

text-align:center;

In the "right" div CSS, you need to add:

text-align:right;

... to perfectly achieve left/center/right aligning.

Answer 5

设置position: relative上包含分区，设置position: relative你的3个div的，并设置bottom 3周的div属性为0 ：

bottom: 0

Answer 6

You can use align-items: flex-end to make the flexbox items aligned vertically at the bottom.

 .container { display: flex; height: 300px; min-width: 400px; background-color: #61a0f8; justify-content: space-between; align-items: flex-end; } .item { width: 100px; height: 120px; background-color: #f08bc3; display: flex; justify-content: center; align-items: center; color: white; font-size: 2rem; } .flex-2 { width: 140px; height: 240px; }

 <div class="container"> <div class="item">1</div> <div class="item flex-2">2</div> <div class="item">3</div> </div>