0

我有 4 个 div 在一个 div 中，我试图将文本居中其中一个。由于我使用溢出：隐藏分机，我无法从我所知道的情况中解脱出来。有没有简单的方法可以做到这一点？这是我的设置。

http://jsfiddle.net/philyphil/amc4m/light/

<div id="phil">
<div id="phily" style="text-align:center">thankyou</div>
<div id="philly">mysite</div>
<div id="philly">mysite</div>
<div id="philly">mysite</div>
</div>
4

3 回答 3

0

尝试将您的id转换为类，因为 id 在您的页面中必须是唯一的：

<div class="phil">
 <div class="phily" style="text-align:center">thankyou</div>
 <div class="philly">mysite</div>
 <div class="philly">mysite</div>
 <div class="philly">mysite</div>
</div>

在您的情况下，只有第一个 id 会应用您的 CSS 规则。

于 2013-06-27T01:26:41.380 回答
0

只是为了合法，我将 id 更改为类（为了唯一性）并使用line-height与 div 相同的方法height将它们垂直居中于 div 上。

.phil {
    overflow:hidden;
    border: 2px solid #000000;
    height: 80px;
    width: 100%;
    background-color: #FFF5ee;
}
.phily {
    float:left;
    height: 70px;
    line-height: 70px; /*<--- Here*/
    font-size: 2.2em;
    border: 5px solid #FFF5ee;
    text-align: center;
    height: 70px;
    width: 29%;
    background-color: red;
    color:black
}
.philly {
    display:inline-block;
    text-align: center;
    font-size: 1.65em;
    border: 5px solid #FFF5ee;
    height: 46px;
    width: 21%;
    line-height:46px;  /*<--- Here*/
    background-color: red;
    color:#FFF5ee;
}

小提琴

于 2013-06-27T01:28:24.407 回答
0

classes这不是要回答你的问题，但你不应该使用ID's这些元素......

Classes是相同的倍数，ID's 必须是唯一的元素

<div id="phil">
 <div class="phily" style="text-align:center">thankyou</div>
 <div class="philly">mysite</div>
 <div class="philly">mysite</div>
 <div class="philly">mysite</div>
</div>
于 2013-06-27T01:28:50.823 回答