Question

＆＃13;

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

＆＃13;

<div class="headers">
    <div class="logo"></div>
    <div class="slogan">IIN</div>
</div>

＆＃13;

如何在不使用负边距/前50％的情况下将我的div [口号]居中？

Answer 1

使用float时您不需要display: table/table-cell ...这应该使用.slogan布局将table-cell div居中。

＆＃13;

.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 */
}

＆＃13;

<div class="headers">
    <div class="logo"></div>
    <div class="slogan">IIN</div>
</div>

＆＃13;

Answer 2

如果您要垂直查看中间标语，请检查小提琴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;
}

Answer 3

用这个

改变你的口号课程

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

Answer 4

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

查看此帖子click

为什么显示：表格不以div为中心？

4 个答案: