Question

我想在我的div（'what'和'where'）中对齐文本，但是现在我将文本放在底部，它将div（search-field1和searchfield2）推到了页面的下方！

我怎么能拥有它，所以文字不会影响这个？是否与cellpadding / spacing有关？

对不起我不是最好的CSS我自学它。

HTML：

<center>
<div class="what"><p>what?</div>
<div class="where">where?</div>
<div>
</center>

<center>
<div class="search-field1">

</div>
<div class="search-field2">

</div>
</center>

CSS：

.what{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #151515;
display: inline-block;
vertical-align: center;


}

.where{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #ffffff;
display: inline-block;
verticle-align: center;

}

.search-field1{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
verticle-align: center;
}

.search-field2{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
horizontal-align: center;
}

谢谢！

詹姆斯

Answer 1

詹姆斯这是你想要的吗？ http://jsfiddle.net/jkeyes/WFPK2/

设置容器的行高（在本例中为.what和.where与高度相同：

line-height: 35px;

Answer 2

听起来您float:left代码

需要center

Answer 3

HTML：

<div class="center">
    <div class="what">what?</div>
    <div class="where">where?</div>
</div>

<div class="center">
    <div class="search-field1"></div>
    <div class="search-field2"></div>
</div>

CSS：如果你在封闭的div上使用float:left，它将允许两个center div并排浮动。

.center {
    float:left;
}

Answer 4

另一个选择是在隐藏的div上将行高设置为零，如下所示：

    line-height: 0px;

然后为周围的div添加填充。像这样：

    padding-top: 10px;

希望能有所帮助。

如何在div中停止文本推送其他div在页面下？

4 个答案: