如何使用引导程序将某些文本右对齐和图像下方的一些文本对齐

问题描述

@L_502_0@

我正在尝试使用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>

Documentation

,

.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>