Установить выравнивание текста на той же строке левого содержимого

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

добавить 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>

Answer 2

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>