我想要一个内联 block 元素居中,里面有一个文本。
这是 HTML:
<div class="container body">
<h1 class="title">FAÇA SUA RESERVA</h1>
<p>Escolha o dia que deseja participar e aceite o nosso aplicativo.</p>
<hr>
<div class="row">
<div class="box thursday col-xs-6 col-sm-3">
<img src="assets/images/box.png">
</div>
<div class="box friday col-xs-6 col-sm-3">
<img src="assets/images/box.png">
</div>
<div class="box friday_2 col-xs-6 col-sm-3">
<img src="assets/images/box.png">
</div>
<div class="box saturday col-xs-6 col-sm-3">
<img src="assets/images/box.png">
</div>
<div class="col-9">
</div>
</div>
我只需要标题和副标题“FAÇA SUA RESERVA”居中,为此我正在使用:
.container.body .subtitle,
.container.body .title {
text-align: center;
}
它工作正常,但如果我在标题元素中进行更改,text-align: center 它将停止工作..
这是标题元素的 css:
.title {
display: inline-block;
border: 1px solid #F98835;
color: #f98835;
padding: 10px;
}
我已经尝试设置 margin: 0 auto;,但似乎没有效果
最佳答案
您需要将 text-align: center
添加到您想要居中的 inline-block
元素的 parent。
.container.body {
text-align: center;
}
关于javascript - 居中行内 block 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26636020/