Verical center Text


#1

Hi,

how is it possible to use a vertical centered text without <br>'s or lines in the site origin editor ?

Thx


#2

Dear Warner,

Thank you for asking. Try to use the “Text” widget, then add the following markup in the content box.

<div class="v-centered-container">

  <div class="v-centered-text">
    Your vertical-aligned text goes here. 
  </div>

</div>

Then, try to apply the following CSS code through the Simple Custom CSS plugin.

.v-centered-container{
  position: relative;
  display: table;
  height: 300px;
  width: 100%;
}

.v-centered-text{
  display: table-cell;
  vertical-align: middle;
  position: relative;
}

You would need to adjust the height value height: 300px; to meet your need.

Let me know how it works for you.

Warmest regards,
Kharis


#3

Thank you.
im going to try it the next days