Question

我真的很喜欢这个并且已经尝试了好几个小时，我把它水平放在div中心，但现在需要让它垂直居中..

这是我在div中水平居中的跨度的css代码。

  .titl {

    font-family:serif;

    text-align:center;

    font-size:35px;
    font-weight: bolder;

    color:#FFFFFF;

    padding-top:1cm;
      text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
    -moz-text-shadow: 0 0 2px #000;
    -webkit-text-shadow: 0 0 2px #000;

  }

这是div代码的html：

<div class="wrapper">

<div id="Production" class="orange" style="cursor:wait">

    <div id="incidentsList">

        <span class="titl">Production</span>


    </div>
</div>





<div id="Infrastructure" class="red" style="cursor:wait">

    <div id="requestsList">
<span class="titl">Infrastructure</span>

    </div>
</div>





<div id="QA" class="green" style="cursor:wait">

    <div id="approvalsList">
<span class="titl">QA</span>

    </div>


</div>

</div>

橙色和红色等的css代码如下：

.orange {
    background-image: url('../images/nFinal.jpg');
    background-position: bottom;
    background-repeat: no-repeat;
    height: 120px;
    width: 224px;
    position: relative;
    float: left;
    margin-top: 2px;
    TEXT-ALIGN: center;
}

编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑* * ** * ** * ** * ** * ** * @Dan我试过你说的但它没有用。 HTML：

  <div id="Productiond">

            <span class="titl">text</span>


    </div>

CSS：

#Productiond {height: 50px}




 .titl {

    font-family:serif;

    text-align:center;

    font-size:35px;
    font-weight: bolder;

    color:#FFFFFF;

    padding-top:1cm;
      text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
    -moz-text-shadow: 0 0 2px #000;
    -webkit-text-shadow: 0 0 2px #000;
    height: 50px; 
    line-height: 50px;
  }

Answer 1

您可以尝试设置.titl范围的高度以匹配封闭的div标记的高度。然后设置line-height范围的.titl以匹配该范围。这将取决于您使用它的上下文。

试试这个例子：

HTML：

<div id='Request'>
<span class='titl'>Test Message</span>
</div>

CSS：

#Request {height: 50px}
.titl {height: 50px; line-height: 50px}

然后，这将在包含Div的内部垂直居中显示标题“Test Message”。

Answer 2

首先，我建议您从padding删除height，line-height和.titl声明。然后，我会在vertical-align: middle上指定.titl。 vertical-align适用于内联元素，span是内联元素。因此，您可以使用vertical-align。

也就是说，在JSFiddle和JSBin上尝试时，我无法复制您的问题。如果这不能解决您的问题，我建议您发布一个或另一个链接。

如何在div中垂直居中？

2 个答案: