为什么显示：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％？

来源

2015-04-28 Gops AB

可能重复的[水平中心div在div]（http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div） –

尝试与我的CSS。没有什么适合 –

'float：right'使div文本浮动在右上角。将'line-height：35px;'添加到你的CSS'.slogan' – Pugazh

使用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>

来源

2015-04-28 15:35:27 MikeM

我希望它在右侧垂直对齐。不水平 –

'text-align：right' should do – MikeM

是的谢谢。我应该设置宽度来限制它只有内容的宽度？ –

您应该使用'margin：0 auto;'上。如果你想在div内对齐文本，你可以使用'text-align：center;'。

检查这个帖子click

来源

2015-04-28 15:31:33 Atanas44

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

来源

2015-04-28 15:35:43

是的。请在此后使用[ctrl + M]替代小提琴。 –

改变你的口号类此

.slogan { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    width: 100%; 
}

来源

2015-04-28 15:37:10 LTasty

为什么显示：table不居中div？

回答

相关问题