为什么显示:table不居中div?
.headers
{
background-color: #ff0000;
width: 100%;
overflow: hidden;
display: table;
}
.logo
{
height: 35px;
border: 1px solid #00ff00;
float: left;
width: 30px;
}
.slogan
{
float: right;
display: table-cell;
vertical-align: middle;
}
<div class="headers">
<div class="logo"></div>
<div class="slogan">IIN</div>
</div>
我如何中心我的div [口号]不使用负保证金/前50%?
使用display: table/table-cell
当你不需要float
小号...这应该使用table-cell
布局居中.slogan
股利。
.headers
{
background-color: #ff0000;
width: 100%;
overflow: hidden;
display: table;
}
.logo
{
height: 35px;
border: 1px solid #00ff00;
/*float: left; NOT THIS */
width: 30px;
display: table-cell; /* THIS */
}
.slogan
{
/*float: right; NOT THIS */
display: table-cell;
vertical-align: middle;
text-align: right; /* THIS */
}
<div class="headers">
<div class="logo"></div>
<div class="slogan">IIN</div>
</div>
您应该使用'margin:0 auto;'上。如果你想在div内对齐文本,你可以使用'text-align:center;'。
检查这个帖子click
[No](http://jsfiddle.net/GopsAB/a02s9nvL/1/) –
好吧,如果你添加到你的小提琴:'宽度:100%;'口号。 –
是@DomlThe-面包。 Atanas请使用演示来演示您的解决方案 –
如果您正在寻找中间垂直的口号,那么请检查小提琴https://jsfiddle.net/nileshmahaja/e6byt6zt/
CSS
.headers
{
background-color: #ff0000;
width: 100%;
overflow: hidden;
display: table;
vertical-align:middle;
}
.logo
{
height: 35px;
border: 1px solid #00ff00;
float: left;
width: 30px;
}
.slogan
{
display: table-cell;
vertical-align: middle;
text-align:right;
}
是的。请在此后使用[ctrl + M]替代小提琴。 –
改变你的口号类此
.slogan {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
}
可能重复的[水平中心div在div](http://*.com/questions/114543/horizontally-center-a-div-in-a-div) –
尝试与我的CSS。没有什么适合 –
'float:right'使div文本浮动在右上角。将'line-height:35px;'添加到你的CSS'.slogan' – Pugazh