如何对齐垂直和水平文本？

Question

我有这样的布局我希望文本中心为horizo​​ntaly和verticaly

我试着这样做（显示：table-cell; vertical-align：middle）

但是当我尝试它时，我毁了我的所有布局：

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>

Answer 1

首先 请注意，您的HTML无效！ （例如h3无法在h6中， li必须在ul内，如果使用外部css，也不要使用内联...）

如果您的文字只是单行，请将line-height与容器相同：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您有多行文字，请使用display: table和display: table-cell

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;