Giamp Giamp - 3 months ago 8
CSS Question

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

I guys ;)
From this example:
Fiddle

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?

#parent{
position:absolute;
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;
}

Answer

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

#margin{
    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.

Comments