在同一行的左边内容而设置文本的对齐方式

Question

我需要将文本设置在图像的同一行上，实际上我在文本的左侧留有图像，但是如果您查看文本，则其顶部会留有空白。可以在同一行上对齐吗？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tab-pane active" id="product1">
   <div class="card">
      <div class="card-img-top d-flex align-items-center">
         <img class="img-fluid align-self-start" src="http://via.placeholder.com/150x150/1f1a38/ffffff?text=Image">
         <label>Checkbox:</label>
         <input type="checkbox" />
         <div class="card-body">
            <p class="card-text">Hello World. Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum</p>
            <p></p>
         </div>
      </div>
   </div>
</div>

还可以看到该复选框未在图像底部对齐。

Answer 1

i have made few changes in your html.

 1. moved the image inside card-body
 2. and used grid system for the alignment
hope this is what you are looking for

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tab-pane active" id="product1">
    <div class="card-body">
      <div class="row">
        <div class="col-3 text-center">
          <img src="http://via.placeholder.com/150x150/1f1a38 ffffff?text=Image" class="img-fluid align-self-start">
              <label for="checkbox">Checkbox:</label>
              <input id="checkbox" type="checkbox">
              
        </div>
        <div class="col-9">
          <p class="card-text">Hello World. Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri
            e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli
            di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum</p>
          <p></p>
        </div>
      </div>
    </div>
</div>

Answer 2

像这样将padding-top: 0px;添加到您的card-body：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tab-pane active" id="product1">
  <div class="card">
    <div class="card-img-top d-flex">
      <img class="img-fluid align-self-start" src="http://via.placeholder.com/150x150/1f1a38/ffffff?text=Image">
      <label>Checkbox:</label>
      <input type="checkbox" style="margin-top: 7px;"/>
      <div class="card-body" style="padding-top: 0px;">
        <p class="card-text">Hello World. Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum</p>
        <p></p>
      </div>
    </div>
  </div>
</div>