我在这里搜索过许多帖子,但找不到更符合我需求的东西。我有一个标志图像50x50px和h2文本元素。我希望将两个元素并排放在我的标题的绝对中心。我尝试了各种CSS技术,但无法完成。下面是我尝试使用的简单引导程序结构:
<div class="container">
<div class="row">
<div class="col-md-12"><img src="https://placeimg.com/50/50/nature" alt="LOGO">
<h2>FOUR SEASONS INTERNATIONAL (PVT) LTD</h2></div>
</div>
</div>
答案 0 :(得分:0)
也许您正在寻找 display:flex with align-items:center
.test{
display:flex;
align-items:center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12 test"><img src="https://placeimg.com/50/50/nature" alt="LOGO">
<h2>FOUR SEASONS INTERNATIONAL (PVT) LTD</h2></div>
</div>
</div>
答案 1 :(得分:0)
img + h1{
display: inline-block
vertical-align: middle;
}
删除您添加的位置仅使用margin,padding, top, left, right bottom
,并在center
将{img}标题放入中心标记后使用col-md-12
标记并添加class col-sm-12