Vertically align content in a fluid DIV

Question

Here's my code: http://jsfiddle.net/g6puyohg/

EDIT Sorry for the confusion, my goal is to vertically align the button inside the second DIV. Something like this.

I don't want to define a fixed height to the second DIV, since I want it to support different screen sizes (desktop and mobile).

I have tried with the display: table; method and didn't work because it requires a fixed height.

No idea what you really want to do. Could explain what you are expecting — Benjamin, Aug 25 '14 at 14:10
Sorry for the confusion, I've edited the question with more information. — rekt, Aug 25 '14 at 14:23
Did any of [the best ways](http://stackoverflow.com/q/396145/87015) work for you? — Salman A, Aug 25 '14 at 14:24

score 3 · Accepted Answer · answered Aug 25 '14 at 14:36

Thanks to CSS Flexible Box, now vertical alignment is possible even in unknown heights.

8.3 Cross-axis Alignment: the align-items and align-self properties

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items.

center value:

The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.)

Hence, you coud add an additional class to .row¹ element with the following declarations:

EXAMPLE HERE

<div class="container-fluid">
    <div class="row vertical-align"> <!-- 
             Here --^                 -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>

.vertical-align {
    display: flex;
    align-items: center;
}

For further reading (including browser support) you could refer to resources below:

^{1. You don't really want to alter all Twitter Bootstrap's rows, do you?}

Actually, it doesn't work as good as I initially thought. When the space gets smaller the content (in this case the button) get's out of both DIVs (parent and the one that contains the button). [Screenshot](http://i.imgur.com/tVbNjxH.png). And if you change `col-xs-6` to `col-sm-6` you'll see the fluid layout doesn't work too well (same as tables), it should create a new line instead of compression the content at a certain size. — rekt, Aug 25 '14 at 15:19
@rekt `...the content get's out of both DIVs` I couldn't reproduce it, it would be great if you could demonstrate the issue on jsfiddle. However about the second issue, you could limit `.vertical-align` selector to be applied on a specific screen size by using `@media` queries like so: onhttp://jsfiddle.net/hashem/g6puyohg/6/ — Hashem Qolami, Aug 25 '14 at 17:33

score -1 · Answer 2 · answered Aug 25 '14 at 14:18

I guess you want the button vertically aligned.

You can use an actual table, check this updated fiddle : http://jsfiddle.net/g6puyohg/3/

The code :

<div class="row">
    <table style='width:100%'>
        <tr>
            <td>
                <div class="col-xs-6">
                    <h2>Header X</h2>
                    <h4>Header Y</h4>
                    <p>
                        Text X
                    </p>
                    <p>
                        <b>Bold X</b>
                        <ul>
                            <li>Line X</li>
                            <li>Line Y</li>
                            <li>Line Z</li>
                        </ul>
                    </p>
                </div>
            </td>
            <td>
                <div class="col-xs-6" style="text-align: center; vertical-align: middle;">
                    <button type="button" class="btn btn-primary btn-lg">Button X</button>
                </div>
            </td>
        </tr>
    </table>
</div>

There's two problems with that, you'd need to add `class="col-md-6"` to the table `` instead of the `DIV`, and it doesn't work too well with the fluid layout, since is squeezes and never goes to a new line when the space gets too small. — rekt, Aug 25 '14 at 14:28

Vertically align content in a fluid DIV

2 Answers2