[英]Boostrap v4.0.0-alpha.6 model - how to center model title
您如何使模型的标题居中? 我厌倦了将类“text-center”添加到 h1 标签,但它一直显示磁贴左对齐。
谢谢
您可以在h3.modal-title
元素上使用w-100
类以及text-center
。
<div class="modal-header text-center">
<h3 class="modal-title w-100">Quiz Results</h3>
</div>
我今天必须弄清楚这一点,特别是当我想要在modal-title
中居中的模态modal-header
时 - 尝试了几种不同的方式,但这是我确定的:
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h3 class='col-12 modal-title text-center'>
Centered Modal Title
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</h3>
</div>
</div>
</div>
如果您想在“modal-header”标签内进行操作,关键是col-12
。
这个问题在这里有详细的答案
只需将w-100属性值添加到类属性即可。 那是:
<div class="modal-header">
<h5 class="modal-title w-100 text-center">Contact us via Email</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<h3 class="modal-title w-100 text-center">I'm centered title</h3>
尝试更改模态标题
.modal-header{
justify-content: center;
}
Sava 方法对我有用。 另一种方法是添加“margin: 0 auto;” 对于您用于标题的任何 css 类。 例如,如果您使用模态标题,请添加到您的 css:
.modal-title {
margin: 0 auto;
}
您还可以将这些类添加到 modal-header
.ml-auto.mr-汽车
<div class="modal-header ml-auto mr-auto">
<h5 class="modal-title" id="exampleModalLongTitle">Model Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
是的 CSS 就足够了,即使在 bootstrap vue 中也是如此:
<b-modal id="mymodal" title="My Modal">
您只需:
.modal-title{
width: 100%;
text-align: center;
}
在你的 css 文件中让它居中。
试试style="margin: 0 auto;"
像<h5 class="modal-title" style="margin: 0 auto;">title</h5>
它工作正常!
要使标题居中并保留关闭按钮,您可以这样做:
<div class="modal-header pl-0">
<h5 class="modal-title w-100 text-center position-absolute">Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
只需在模态标题 div 中添加.justify-content-center
类:
<div class="modal-header justify-content-center">
//your content here
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.