CODEWITHSUNDEEP
htmlcssvertical-alignment
David Martins
David Martins

Reputation: 2056

Vertical align middle inside div columns

Is it possible, with CSS, while using a row with two column, one with an image and another with text, to have their content vertically aligned in the middle?

I've been banging my head for days over this and tried everything I could possibly think of.

This is the basic structure that I'm using which is entirely based on percentages. This is for a responsive one-page layout based on a series of sections, each with min-height set to 100%.

CSS

html, body {
    width: 100%;
    height: 100%;
}

section {
    width: 100%;
    min-height: 100%;
    display:table;
    height:inherit;
}

.row {
    width: 100%;
    height: 100%;
    display:table-cell;
}

.col-left, .col-right {
    float: left;
    width: 50%;
    height: 100%;
}

/*--this should be vertically centred--*/

.content {
}

HTML

<section>

        <div class="row">

            <div class="col-left">
                <div class="content">
                    <h1>SOME TEXT</h1>
                </div>
            </div>

            <div class="col-right">
                <div class="content">
                    <img src="SOME IMAGE URL">
                </div>
            </div>

        </div>

</section>

JSFiddle

Upvotes: 4

Views: 39598

Answers (4)

David Martins
David Martins

Reputation: 2056

For anyone interested in this topic, this issue and the answers provided raised in me another question regarding which method to apply in this situation, and in fact, for building columns in general: Floating or Display property. For any newbie or self-taught wannabe developer like my self may be interesting to know what I've concluded after research and testing.

I find my self often using different methods for building columns that revolve around Floating the elements and in one way or another always require some hacking in the end to do exactly what I want, leaving me with a feeling of inconsistency and unreliability.

One would think that something so vital for layout structure would have at this point in time some obvious, elegant and simple solution. Apparently it has, and it's called Display Table. It might have limitations in some very specific situations but in general it's all you need. It's rock solid and you can pretty much do anything you want with it. Unfortunately, I think the word "table" is still a kind of taboo. This method however is simple, comprehensible, reliable and doesn't require any hacks to behave as expected. Vertical alignment which is always a struggle is also made easy this way.

A simple structure like this is all you need: 

.container {
  display: table;
}
.row {
  display: table-row;
}
.col {
  display: table-cell;
}

For some reason (probably because of the nasty word "table"), you wont be able to find this method suggested anywhere with a simple search on basic css columns.

I thought this articles on the subject were interesting:

Give Floats the Flick in CSS Layouts

Farewell Floats: The Future of CSS Layout

Upvotes: 1

j08691
j08691

Reputation: 207913

You were 95% of the way there as you laid out the structure using display:table, and display:table-cell, but you floated what should have been display:table-cell, and set table-cell on what should have been table row. Use this instead:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
section {
    width: 100%;
    min-height: 100%;
    display:table;
    height:inherit;
}
.row {
    width: 100%;
    height: 100%;
    display:table-row;
}
.col-left, .col-right {
    display:table-cell;
    width: 50%;
    height: 100%;
    vertical-align:middle;
}
.col-left {
    background: MidnightBlue
}
.col-right {
    background: ForestGreen;
    text-align: center;
}
.content {
    border: 1px dashed red;
}
h1 {
    font-family: sans-serif;
    color: white;
}
<section>
    <div class="row">
        <div class="col-left">
            <div class="content">
                 <h1>I should be vertically aligned in the middle...<br><br>And so should the image on the right...
                </h1>

            </div>
        </div>
        <div class="col-right">
            <div class="content">
                <img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png">
            </div>
        </div>
    </div>
</section>

Upvotes: 3

David Rubin
David Rubin

Reputation: 123

you can try this:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
section {
    width: 100%;
    min-height: 100%;
    display:table;
    height:inherit;
}
.row {
    width: 100%;
    height: 100%;
    display:table;
}
.col-left, .col-right {
    float: left;
    display:table;
    vertical-align:middle;
    width: 50%;
    height: 100%;
}
.col-left {
    background: MidnightBlue
}
.col-right {
    background: ForestGreen;
    text-align: center;
}
.content {
    display:table-cell;
    vertical-align:middle;
    height:100%;
    border: 1px dashed red;
}
h1 {
    font-family: sans-serif;
    color: white;
}
<section>
    <div class="row">
        <div class="col-left">
            <div class="content">
                 <h1>I should be vertically aligned in the middle...<br><br>And so should the image on the right...
                </h1>

            </div>
        </div>
        <div class="col-right">
            <div class="content">
                <img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png">
            </div>
        </div>
    </div>
</section>

Upvotes: 2

isherwood
isherwood

Reputation: 61083

.row {
    ...
    display:table-row;
}
.col-left, .col-right {
    ...
    display: table-cell;
    vertical-align: middle;
}

Demo

Upvotes: 13

Related Questions