css - 如何在 li 中垂直居中 h1 和 span

Question

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

我需要在 description_content li 中垂直居中 h1 和 span。

但是，有一个问题。仅当 Phone 变量不为空时才会出现。所以我需要以 Seller 和 Phone: 垂直居中的方式进行操作，同时，如果没有 Phone，则只有 Seller 本身居中:

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

这是一个 fiddle :http://jsfiddle.net/pazzesco/vykqv19j/

关于如何实现这一点有什么想法吗？

Answer 1

正如我从评论中了解到的，您不希望所有的 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;
}