如何将h1垂直居中并以li为中心答案

【问题标题】：How to vertically center h1 and span in a li如何将h1垂直居中并以li为中心
【发布时间】：2014-11-29 22:39:03
【问题描述】：

我一直在尝试为此找到解决方案，但仍然无法做到。

我需要将 h1 垂直居中并在 description_content li 内跨越。

但是，有一个问题。只有在 Phone 变量不为空时才会出现。所以我需要以卖方和电话的方式做到这一点：垂直居中在一起，同时，如果没有电话，只有卖方自己居中：

<li id="description_content">
     <h1>Seller</h1>
     <br>  <br>
     <span>Phone: </span> <br>
</li>

这是我的 CSS：

#description_content{
    height:163px !important;
    font-size:16px;
    }

#description_content h1{
    font-size:16px;
    font-weight:normal;
    padding:14px 10px 20px 7px;
    }

#description_content span{
    padding:0 10px 0 7px;
    float:left;
    font-weight:normal !important;
    }

我尝试了几种不同的可能性，包括下面的代码，它使内容居中，但也弄乱了后面的li：

display:table-cell!important;
vertical-align:middle!important;

这是一个小提琴：http://jsfiddle.net/pazzesco/vykqv19j/

关于如何实现这一点的任何想法？

【问题讨论】：

标签： css center vertical-alignment

【解决方案1】：

据我从 cmets 了解到，您不希望所有的 li 都在同一行。

使用以下结构：

<li class="description_content">
    <div class="li-wrapper">
        <h1>Seller</h1>
        <span>Phone: </span>
    </div>
</li>

然后，将您的 li 显示为表格，将您的 li-wrapper 显示为在中间垂直对齐的表格单元格。

.description_content{
  display: table;
  width: 100%;
  height:163px !important;
  font-size:16px;
}

.description_content .li-wrapper {
  display: table-cell;
  vertical-align: middle;
}

【讨论】：