问题描述
我正在尝试使用Bootstrap进行此操作,到目前为止,我已经能够通过d-inline
类将Marketplace放在徽标旁边。
我的问题是市场和徽标没有垂直对齐,并且下面的文本对齐得不太好,它看起来像是一段有很多中断的段落。如何实现图像上显示的效果?
.marketplace {
background-color: #5960CB;
width: 100%;
height: 50%;
list-style-type: none;
}
.containerMarket p {
color: white;
font-family: 'Poppins',sans-serif;
margin-left: 5px;
margin-top: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="marketplace col-sm-12">
<div class="container containerMarket col-sm-4">
<img src="img/fullLogoWhite.png" width="150" class="d-inline"> <p class="d-inline">Marketplace</p>
<p>High quality items created by our global community.</p>
<p><span>65,478</span> Products | <span>65,478</span> Members | <span>65,478</span> Vendors</p>
</div>
谢谢!
解决方法
您必须使用Bootstrap垂直对齐方式:
,<td class="align-baseline">baseline</td>
.marketplace {
background-color: #5960CB;
width: 100%;
height: 50%;
list-style-type: none;
}
.containerMarket p {
color: white;
font-family: 'Poppins',sans-serif;
margin-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="marketplace col-sm-12">
<div class="container containerMarket">
<div class="d-flex align-items-center">
<img src="img/fullLogoWhite.png" width="150" class="d-inline">
<p class="d-inline">Marketplace</p>
</div>
<p class="small">High quality items created by our global community.</p>
<p class="small"><span>65,478</span> Products | <span>65,478</span> Members | <span>65,478</span> Vendors</p>
</div>