Centering content vertically inside div columns

Question

Centering content vertically inside div columns

Have you ever wondered if it's possible to vertically align content in a row with two columns, one containing an image and the other text using CSS?

I've spent days trying different approaches but nothing seems to work.

Here is the basic structure I am currently working with, focusing on responsive design with sections set to a minimum height of 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

html css vertical-alignment

Answer 1

Answer №1

.section {
    ...
    display:table-section;
}
.div-left, .div-right {
    ...
    display: table-box;
    vertical-align: center;
}

View Demo

Answer 2

.section {
    ...
    display:table-section;
}
.div-left, .div-right {
    ...
    display: table-box;
    vertical-align: center;
}

View Demo

Answer 3

Answer №2

You made great progress with the structure using display:table and display:table-cell, but there were some errors in your implementation. Avoid floating elements that should be table cells and ensure correct usage of table-row and table-cell properties. Here is a revised version:

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>

Answer 4

You made great progress with the structure using display:table and display:table-cell, but there were some errors in your implementation. Avoid floating elements that should be table cells and ensure correct usage of table-row and table-cell properties. Here is a revised version:

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>

Answer 5

Answer №3

Here is a suggestion to try:

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>

Answer 6

Here is a suggestion to try:

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>

Answer 7

Answer №4

Exploring the topic further, I found myself pondering the best method for building columns in web development: Floating or Display property. As a self-taught developer, I often encounter challenges when using float elements to structure columns, leading to a sense of inconsistency and unreliability in my designs.

Surprisingly, there exists a simple and elegant solution known as Display Table that provides a solid foundation for layout structure without the need for hacks. This method offers versatility and ease of use, eliminating common struggles like vertical alignment issues.

The key lies in a straightforward structure:

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

Despite its effectiveness, the term "table" may deter some from embracing this technique. However, it delivers reliable results and simplifies the design process significantly.

Interestingly, resources advocating for this approach may not be easily accessible through conventional searches on CSS columns.

Additional articles worth reading:

Give Floats the Flick in CSS Layouts

Farewell Floats: The Future of CSS Layout

Answer 8

Exploring the topic further, I found myself pondering the best method for building columns in web development: Floating or Display property. As a self-taught developer, I often encounter challenges when using float elements to structure columns, leading to a sense of inconsistency and unreliability in my designs.

Surprisingly, there exists a simple and elegant solution known as Display Table that provides a solid foundation for layout structure without the need for hacks. This method offers versatility and ease of use, eliminating common struggles like vertical alignment issues.

The key lies in a straightforward structure:

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

Despite its effectiveness, the term "table" may deter some from embracing this technique. However, it delivers reliable results and simplifies the design process significantly.

Interestingly, resources advocating for this approach may not be easily accessible through conventional searches on CSS columns.

Additional articles worth reading:

Give Floats the Flick in CSS Layouts

Farewell Floats: The Future of CSS Layout

Centering content vertically inside div columns

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Looking to retrieve a specific portion of HTML data returned from an AJAX request

Customize the focus color of mat-label within a mat-form-field in Angular

Utilize the content within an input field to perform a calculation and showcase the outcome in a separate element

Transitioning images in JQuery by using a rollover effect

Mysterious issue causing PHP $_POST to return null

Is my webpage loading even as the spinning wheel is being displayed?

When hovering over an object in three.js, the cursor should change on mouseover

Using jQuery's .post() method to automatically scroll to the top of

Contact form in PHP fails to send upon submission

Numeric input of 10 not recognized in the textbox

Enhance your FullCalendar experience with beautifully crafted tooltips

Replacing variables in a function: A step-by-step guide

Clicking on the overlay does not close the bootstrap collapsed toggle

Delete an entry from the list

jQuery's visibility check function is not functioning properly

Hide a parent div in jQuery depending on the checkbox status

Using display:inline-block will increase the vertical spacing

Discover the method for measuring the size of a dynamically generated list

Jquery event handlers are not functioning properly on dynamically added iframes with constantly changing content

How can I create a box-shaped outline using Three.js?