Question

我似乎有麻烦使我的div居中，center-block似乎无法奏效。我打算将包含<p>标记的嵌套div居中。我并没有试图将内容集中在div中。因此，我希望将中心peroperty应用于div本身而不是其内容。

<div class="container">
    <div class="row">
        <div class="col-xs-12 center-block">
            <h1>{{secretDisplay.secretTitle}}</h1>
                <div class="row center-block" style="text-align:left">
                    <div class="col-xs-12 center-block" style="text-align:left">
                        <p contenteditable="true" class="chat_window">
                            <img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/>
                        </p>
                    </div>
                </div>
                <div>
                    <p contenteditable="true" class="write_window">This is the test</p>
                </div>
        </div>
     </div>
</div>

CSS

.center-block {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

该页面必须具有移动响应性，因此Bootstrap的偏移可能会导致问题。

任何建议都将受到高度赞赏。

麦克

Answer 1

您无法居中col-xs-12。它接近100％的可用宽度，加上一些余量。它无处可去。如果您希望center-block的内容显示为居中，这就是我所假设的，请执行以下操作：

.center-block {
   text-align: center;
}

您可能还想从行中删除此类。

。中心DIV在Bootstrap 3中的.center-block

1 个答案: