爲什麼顯示：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？

回答

相關問題