CSS中心div不工作答案

【问题标题】：css center div not workingCSS中心div不工作
【发布时间】：2018-11-18 20:47:14
【问题描述】：

我想将扬声器 div 居中，它位于评论 div 中。我似乎无法让它工作。 :(

HTML：

<div class="review">
<div class="speaker">
<p>SPEAKER DIV</p>
</div>
</div>

CSS：

.speaker{
align:center;
}

这不起作用：/

【问题讨论】：

标签： html css

【解决方案1】：

没有像 align 这样的 CSS 属性。

当您说要“居中”扬声器 div 时，您到底是什么意思？

您可以像这样将其文本居中对齐：

.speaker {
    text-align:center;
}

（见http://jsfiddle.net/pauldwaite/X7LN5/）

如果您希望扬声器 div 仅与其文本一样宽，并位于评论 div 的中心，那么您需要使用这个：

.review {
    text-align:center;
}

.speaker {
    display:inline-block;
}

（见http://jsfiddle.net/wxha4/）

【讨论】：

【解决方案2】：

给它一个宽度和边距：0 auto;

<div class="review">
    <div class="speaker">
        <p>SPEAKER DIV</p>
    </div>
</div>

div.speaker{
    background-color:red;
    width:100px;
    margin:0 auto;
}

See it in action!

【讨论】：

【解决方案3】：

我迟到了大约一年，但这里是：

在大多数浏览器中，这将起作用：

.speaker{
    margin: 0 auto;
}

但是，在 IE8 及更低版本中，margin:auto 将不起作用（IE8 仅在没有 !DOCTYPE 声明的情况下。See W3Schools Horizontal-Align Tutorial）

在这种情况下，您可以使用text-align: center 和width 的组合来获得想要的效果：

.review{
    text-align:center;
}
.speaker{
    text-align:left;
    width:200px;
    margin:0 auto;
}

这种方法的缺点是你必须声明一个宽度，否则它不会居中。

祝你好运！

【讨论】：

【解决方案4】：

效果很好。

.speaker{ 
margin: 0 auto;
text-align:center;
width:100%;

}

祝你好运

【讨论】：

【解决方案5】：

给父母一个 text-align: center; 然后你可以将孩子移动到父div中的任何位置

.speaker {
       margin: 0 auto;

【讨论】：

【解决方案6】：

试试

.speaker p{
text-align:center;
}

或

.speaker {
 text-align:center;
 }

【讨论】：

【解决方案7】：

CSS 中没有 align 属性。将水平边距设置为自动以使块居中。请参阅Centring using CSS 了解更多详细信息（包括解决 Internet Explorer 问题的方法）

【讨论】：

【解决方案8】：

那是因为该语法不存在。您需要通过margin 属性使 div 居中。

.speaker{
    margin:0px auto 0px auto;
}

演示 http://jsfiddle.net/t4kBj/

【讨论】：