CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3vertical-alignment
rekt
rekt

Reputation: 91

Vertically align content in a fluid DIV

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.

Upvotes: 2

Views: 118

Answers (2)

Hashem Qolami
Hashem Qolami

Reputation: 99464

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 .row1 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?

Upvotes: 3

Ardgevald
Ardgevald

Reputation: 11

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>

Upvotes: -1

Related Questions