Giamp Giamp - 5 months ago 14
CSS Question

How to center text vertically in parent div, with two columns in responsive layout

I guys ;)
From this example:

I've a responsive layout, with 2 columns.

I've got to vertically center the left div text "lorem ipsum".

What is the best solution in this case?

right: 20%;
width: 45%; /* 60% if you include the padding-left */
padding-left: 15%;
background-image: url('x.png');
text-align: right;
background-color: #ddd;


One approach could be Flexible Box Layout on your #margin element.

    width: 15%;
    height: 100%;
    padding-right: 12px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #999;
    background-image: url('y.png');

    /* New code to center vertically... */
    display: flex;
    align-items: center; 

The align-items property defines the default alignment for items inside the flexible container.

You can check this fiddle for an example.