在左侧内容的同一行上设置文本对齐方式 [英] Set text alignment on the same line of left content

问题描述

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

I need to set the text on the same line of the image, actually I have an image left to the text, but if you look at the text, it have an empty space on the top. Is possible align on the same line?

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

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

Also as you can see the checkbox is not aligned at the bottom of the image..

推荐答案

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>

这篇关于在左侧内容的同一行上设置文本对齐方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！