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

Question

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;
}

My request is different. We have to align the left div in a responsive design with two columns with different background. Is not the same thing. Thank you — Giamp, Aug 10 '16 at 10:57

score 0 · Answer 1 · answered Aug 10 '16 at 10:06

You can use :before or :after pseudo selector to make it vertically center as follows:

#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;
}
#margin{
  white-space: nowrap;
  width: 15%;
  height: 100%;
  padding-right: 12px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #999;
  background-image: url('y.png');
}
#margin:before {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  margin: 0 0 0 -5px;
  height: 100%;
  width: 1px;
  content: '';
}

#margin .text-holder {
  vertical-align: middle;
  display: inline-block;
  white-space: normal;
}

<div id="parent">
  <div id="margin">
    <div class="text-holder">
      Lorem ipsum.
    </div>
  </div>

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in odio leo, vel egestas arcu. Pellentesque iaculis tincidunt tortor, vel rhoncus justo cursus nec.

</div>

Thanks for your help, this solution also works well. – Giamp Aug 10 '16 at 11:02 — Giamp, Aug 10 '16 at 11:02
@Giamp you are welcome) – Mohammad Usman Aug 10 '16 at 11:04 — Mohammad Usman, Aug 10 '16 at 11:04

score 0 · Accepted Answer · answered Aug 10 '16 at 10:06

0

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.

answered Aug 10 '16 at 10:06

HiDeoo

10,353
8
47
47

This works, great. If I delete "lorem ipsum" and write only "lorem" the text moves to the left and does not remain in the middle. It 'also possible to center it horizontally? – Giamp Aug 10 '16 at 10:41
Yes, you can add `justify-content: center;` to define the alignment on the main axis too. – HiDeoo Aug 10 '16 at 10:47

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

2 Answers2