Как установить изображение наверх?

Question

У меня есть html:

 <div class="tab-pane active" id="product1">
       <div class="card">
          <div class="card-img-top d-flex align-items-center">
             <img class="img-fluid" src="http://via.placeholder.com/150x150/1f1a38/ffffff?text=Image">
             <div class="card-body">
                <p class="card-text">Hello World</p>
                <p></p>
             </div>
          </div>
       </div>
    </div>

Я успешно добавил изображение и текст в одну строку, но есть проблема: изображение слева отображается по центру по вертикали, я хочу по вертикали сверхукак я могу это сделать?

<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" src="http://via.placeholder.com/150x150/1f1a38/ffffff?text=Image">
         <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

Изображение находится в вертикальном центре, потому что родитель имеет класс align-items-center.Самое простое решение - добавить класс align-self-start к изображению, и он будет вверху.

Вы должны проверить свой код, потому что card-body находится внутри card-img-top.Проверьте документацию здесь LINK , и вы заметите, что card-img-top в основном используется для изображения в верхней части карты.Корпус карты обычно располагается непосредственно внутри карты.Что делать, если вы используете медиа-объект?Проверьте это LINK

Кстати, есть стабильная версия Bootstrap, последняя версия 4.2.1.

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