How to allign text vertical and horizontal?

Question

I have layout like this i want have text the centered horizontaly and verticaly

I tried to do with this (display: table-cell; vertical-align: middle)

But when i tried it i ruin my all layout:

li {list-style:none;}
h3 {margin:0px}
p {margin:0px}
ul {margin:0px; padding:0px}

<li style="background:#263F73; border-style: dotted; border-width: 1px; height:100px;">

  <div style="width:70%; float: left; "><h6 style="margin:0px;"><h3>Text</h3></h6></div>
  <ul style="float: right; height:100%; width: 30%;">
    <li>
      <li style=" height:50%; background:#ffffff;"><p style=" margin: 0px;"><div><p class="centerText">Text</p></div></li>
      <li style=" height:50%; background:#fff465;"><p style=" margin: 0px;"><div><p class="centerText">Text</p></div></li>
    </li>
  </ul>
  
</li>

possible duplicate of [How to align text vertically center in div with css?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) — Bill, Nov 19 '14 at 13:10

score 0 · Answer 1 · answered Nov 19 '14 at 12:21

First of all have in mind that your HTML is not valid! (like h3 can't be in h6, li must be inside ul, if using external css, don't use inline too...)

If your text is only single line ever, apply line-height same as container:

li {
  list-style: none;
}
p {
  margin: 0px
}
ul {
  margin: 0px;
  padding: 0px
}
.centerText {
  line-height: 50px;
}
.text1 {
  line-height: 100px;
  font-size: 18px;
}

<li style="background:#263F73; border-style: dotted; border-width: 1px; height:100px;">

  <div style="width:70%; float: left; ">
    <h6 style="margin:0px;" class="text1">Text1</h6>
  </div>
  <ul style="float: right; height:100%; width: 30%;">
    <li style=" height:50%; background:#ffffff;">
      <p style=" margin: 0px;">
        <p class="centerText">Text2</p>

    </li>
    <li style=" height:50%; background:#fff465;">
      <p style=" margin: 0px;">
        <p class="centerText">Text3</p>
    </li>
  </ul>

</li>

If you have multiline text, than use display: table and display: table-cell

li {
  list-style: none;
}
p {
  margin: 0px
}
ul {
  margin: 0px;
  padding: 0px
}
.table {
  display: table;
}
.tcell {
  display: table-cell;
  vertical-align: middle;
}

<li style="background:#263F73; border-style: dotted; border-width: 1px; height:100px;">

  <div style="width:70%; float: left; height: 100%;" class="table">
    <div style="margin:0px;" class="tcell">Text1<br/>Multiple</div>
  </div>
  <ul style="float: right; height:100%; width: 30%;">
    <li style=" height:50%; background:#ffffff; width: 100%" class="table">
      <p style=" margin: 0px;" class="tcell">
        Text2
      </p>
    </li>
    <li style=" height:50%; background:#fff465; width: 100%" class="table">
      <p style=" margin: 0px;" class="tcell">
        Text3
      </p>
    </li>
  </ul>

</li>

How to allign text vertical and horizontal?

Text

1 Answers1