Responsively center text vertically

Question

Responsively center text vertically

I am facing a challenge with two divs that are floating next to each other: one contains a large headline text, and the other has a photo with a caption. My objective is to ensure that the headline text is vertically centered regardless of the height of the div.

Despite trying various methods to achieve this, I have found it quite difficult. You can refer to my code in the following codepen:

http://codepen.io/ckatz/pen/KaBNxm

HTML:

<div class="container_16">
  <div class="grid_8 headline">
    <span class="gold"><strong>We have a special way of helping</strong>/span><br> each individual find their success.</p>
  </div>
  <div class="grid_8">
    <div>
      <div class="wp-caption alignnone" style="width: 100%">
        <img src="http://placehold.it/500x500" alt="" width="100%" height="auto">
        <p class="wp-caption-text">photo caption</p>
      </div>
    </div>
  </div>

CSS:

.container_16 {
  width: 90%;
}

.container_16 .grid_8 {
  width: 47%;
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}

p.wp-caption-text {
  text-align: center;
  font-weight: bold;
  font-style: normal;
  margin: 1em;
  padding: 0 0 1em 0;
}

css vertical-alignment responsive

Answer 1

Answer №1

This approach involves setting the container's height based on the image and then vertically aligning the text.

.wrapper {
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Answer 2

This approach involves setting the container's height based on the image and then vertically aligning the text.

.wrapper {
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Answer 3

Answer №2

Utilize flex alignment and the align-self property within the child element. Implement these CSS rules:

.box_27 {
    display: flex;
    width: 90%;
}
.subtitle {
    align-self: center;
}

Answer 4

Utilize flex alignment and the align-self property within the child element. Implement these CSS rules:

.box_27 {
    display: flex;
    width: 90%;
}
.subtitle {
    align-self: center;
}

Answer 5

Answer №3

If you want to ensure your text is vertically aligned, here's a CSS solution:

.silver {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

By using this code, your text will remain centered no matter the height of the containing div.

Answer 6

If you want to ensure your text is vertically aligned, here's a CSS solution:

.silver {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

By using this code, your text will remain centered no matter the height of the containing div.

Answer 7

Answer №4

Instead of using the float property, consider using display with options like (inline-block,table,table-cell, flex) along with vertical-align or margin:

inline-block + vertical-align

@import url('https://fonts.googleapis.com/css?family=Montserrat');

body {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: normal;
}

p {
  font-size: 1em;
  line-height: 1.4em;
}

.container_16 {
  width: 90%;
}

.container_16 .grid_8 {
  width: 47%;
  display: inline-block;
  vertical-align:middle;
  position: relative;
}

.headline {
  font-size: 3em;
}

.gold {
  color: #ffb500;
}

p.wp-caption-text {
  text-align: center;
  font-weight: bold;
  font-style: normal;
  margin: 1em;
  padding: 0 0 1em 0;
}

<div class="container_16">
  <div class="grid_8 headline>
    <p>
      <span class="gold"><strong>We have a special way of helping</strong></span>
      <br> each individual find their success.
    </p>
  </div>
  <div class="grid_8">
    <div>
      <div class="wp-caption alignnone" style="width: 100%px">
        <img src="http://placehold.it/500x500" alt="" width="100%" height="auto">
        <p class="wp-caption-text">This is a caption for the photo here.</p>
      </div>
    </div>
  </div>

display:table-cell and vertical-align

@import url('https://fonts.googleapis.com/css?family=Montserrat');
 body {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: normal;
}
p {
  font-size: 1em;
  line-height: 1.4em;
}
.container_16 {
  width: 90%;
  display:table;
  table-layout:fixed;
}
.container_16 .grid_8 {
  width: 47%;
  display: table-cell;
  vertical-align: middle;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
}
.headline {
  font-size: 3em;
}
.gold {
  color: #ffb500;
}
p.wp-caption-text {
  text-align: center;
  font-weight: bold;
  font-style: normal;
  margin: 1em;
  padding: 0 0 1em 0;
}

<div class="container_16">
  <div class="grid_8 headline">
    <p>
      <span class="gold"><strong>We have a special way of helping</strong></span>
      <br>each individual find their success.
    </p>
  </div>
  <div class="grid_8">
    <div>
      <div class="wp-caption alignnone" style="width: 100%px">
        <img src="http://placehold.it/500x500" alt="" width="100%" height="auto"><p class="wp-caption-text">This is a caption for the photo here.</p>
      </div>
    </div>
  </div>

display:flex and margin:auto 0;

@import url('https://fonts.googleapis.com/css?family=Montserrat');

body {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: normal;
}

p {
  font-size: 1em;
  line-height: 1.4em;
}

.container_16 {
  width: 90%;
  display:flex;
}

.container_16 .grid_8 {
  width: 47%;
  margin:auto 0;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}

.headline {
  font-size: 3em;
}

.gold {
  color: #ffb500;
}

p.wp-caption-text {
  text-align: center;
  font-weight: bold;
  font-style: normal;
  margin: 1em;
  padding: 0 0 1em 0;
}

<div class="container_16">
  <div class="grid_8 headline">
    <p>
      <span class="gold"><strong>We have a special way of helping</strong></span>
      <br> each individual find their success.
    </p>
  </div>
  <div class="grid_8">
    <div>
      <div class="wp-caption alignnone" style="width: 100%px">
        <img src="http://placehold.it/500x500" alt="" width="100%" height="auto">
        <p class="wp-caption-text">This is a caption for the photo here.</p>
      </div>
    </div>
  </div>

Answer 8

Instead of using the float property, consider using display with options like (inline-block,table,table-cell, flex) along with vertical-align or margin:

inline-block + vertical-align

@import url('https://fonts.googleapis.com/css?family=Montserrat');

body {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: normal;
}

p {
  font-size: 1em;
  line-height: 1.4em;
}

.container_16 {
  width: 90%;
}

.container_16 .grid_8 {
  width: 47%;
  display: inline-block;
  vertical-align:middle;
  position: relative;
}

.headline {
  font-size: 3em;
}

.gold {
  color: #ffb500;
}

p.wp-caption-text {
  text-align: center;
  font-weight: bold;
  font-style: normal;
  margin: 1em;
  padding: 0 0 1em 0;
}

<div class="container_16">
  <div class="grid_8 headline>
    <p>
      <span class="gold"><strong>We have a special way of helping</strong></span>
      <br> each individual find their success.
    </p>
  </div>
  <div class="grid_8">
    <div>
      <div class="wp-caption alignnone" style="width: 100%px">
        <img src="http://placehold.it/500x500" alt="" width="100%" height="auto">
        <p class="wp-caption-text">This is a caption for the photo here.</p>
      </div>
    </div>
  </div>

display:table-cell and vertical-align

@import url('https://fonts.googleapis.com/css?family=Montserrat');
 body {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: normal;
}
p {
  font-size: 1em;
  line-height: 1.4em;
}
.container_16 {
  width: 90%;
  display:table;
  table-layout:fixed;
}
.container_16 .grid_8 {
  width: 47%;
  display: table-cell;
  vertical-align: middle;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
}
.headline {
  font-size: 3em;
}
.gold {
  color: #ffb500;
}
p.wp-caption-text {
  text-align: center;
  font-weight: bold;
  font-style: normal;
  margin: 1em;
  padding: 0 0 1em 0;
}

<div class="container_16">
  <div class="grid_8 headline">
    <p>
      <span class="gold"><strong>We have a special way of helping</strong></span>
      <br>each individual find their success.
    </p>
  </div>
  <div class="grid_8">
    <div>
      <div class="wp-caption alignnone" style="width: 100%px">
        <img src="http://placehold.it/500x500" alt="" width="100%" height="auto"><p class="wp-caption-text">This is a caption for the photo here.</p>
      </div>
    </div>
  </div>

display:flex and margin:auto 0;

@import url('https://fonts.googleapis.com/css?family=Montserrat');

body {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: normal;
}

p {
  font-size: 1em;
  line-height: 1.4em;
}

.container_16 {
  width: 90%;
  display:flex;
}

.container_16 .grid_8 {
  width: 47%;
  margin:auto 0;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}

.headline {
  font-size: 3em;
}

.gold {
  color: #ffb500;
}

p.wp-caption-text {
  text-align: center;
  font-weight: bold;
  font-style: normal;
  margin: 1em;
  padding: 0 0 1em 0;
}

<div class="container_16">
  <div class="grid_8 headline">
    <p>
      <span class="gold"><strong>We have a special way of helping</strong></span>
      <br> each individual find their success.
    </p>
  </div>
  <div class="grid_8">
    <div>
      <div class="wp-caption alignnone" style="width: 100%px">
        <img src="http://placehold.it/500x500" alt="" width="100%" height="auto">
        <p class="wp-caption-text">This is a caption for the photo here.</p>
      </div>
    </div>
  </div>

Answer 9

Answer №5

Here is a straightforward solution that utilizes display: table-cell;, inspired by the information found in this CSS Tricks post: Achieving Vertical Centering for Multi-Lined Text

<div class="parent">
  <p>Multi <br>line</p>
</div>

.parent {
  display: table;
}

.parent p {
  display: table-cell;
  vertical-align: middle;
}

Check out the Demo on JS Bin

Answer 10

Here is a straightforward solution that utilizes display: table-cell;, inspired by the information found in this CSS Tricks post: Achieving Vertical Centering for Multi-Lined Text

<div class="parent">
  <p>Multi <br>line</p>
</div>

.parent {
  display: table;
}

.parent p {
  display: table-cell;
  vertical-align: middle;
}

Check out the Demo on JS Bin

Responsively center text vertically

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What could be causing my carousel to malfunction?

Convert traditional class-based styles to inline styles

The alarm feature is malfunctioning

The HTML button triggers a function to execute on a different webpage when clicked

Unusual display of footer controlled by CSS in certain template pages

Optimizing CSS table styles for larger cell width

Previewing a PDF file with multiple headers displayed above the text content

Changing the order of element names depending on their location within the parent element using jQuery

In React, CSS @media queries are specifically designed to function only within the Device Mode of Developer Tools

"Which is better for maximizing the efficiency of an image grid: CSS or Jquery? What are the key

Instructions for removing a class using the onclick event in JavaScript

What is the best way to format each <li> element onto a separate line?

Looking for a specific search term within the middle of strings in an array

Is there a way to emphasize a particular link in a navigation bar without causing changes to the other links?

Eliminating extra space below the footer using CSS in Wordpress site

What is the best way to obtain the final HTML output once all scripts have been executed

Can a div be made to resize gradually?

Adjusting the text color based on the dynamically set background color

Adjusting the height of an element as you scroll will activate the scroll event

Center or left-align the divs