Question

我一直在努力寻找解决方案，但仍然无法做到。

我需要在description_content li。

中垂直居中h1和span

然而，有一个问题。仅当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/

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

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

如何垂直居中h1和跨度

1 个答案: