HTML Изображение и текст

Question

код:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row py-4">
  <div class="col-12 mb-3 col-md-6 text-center leftimage">
    <img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="width:512px;height:640px; float:right" alt="Google">
    <b><h3> Google </h3></b>
    <p> Google Play Store </p>
    <a href="" class="btn btn-primary">Link</a>
  </div>
  <div class="col-12 mb-3 col-md-6 text-center leftimage">
    <img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="width:512px;height:640px; float:left" alt="Gmail">
    <b> <h3> Google Gmail </h3> </b>
    <p> Gmail </p> <br>
    <a href="" class="btn btn-primary">Link</a>
  </div>
</div>

Изображение (1):

с поплавком влево и вправо (2):

Проблема: когда я добавляю float:left и float:right, текст будет менять положение. (требуется текст и ссылка под изображением

То, что я хотел: я хочу, чтобы оба изображения располагались как Изображение (2) + Текст и ссылка под изображением

Answer 1

Когда вы используете float, вы должны использовать clear:<right|left|both или clearfix класс, если вы используете bootstrap после этих элементов.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row py-4">
  <div class="col-12 mb-3 col-md-6 text-center leftimage">
    <img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="width:512px;height:640px; float:right" alt="Google">
    <div class="clearfix"></div>
    <b><h3> Google </h3></b>
    <p> Google Play Store </p>
    <a href="" class="btn btn-primary">Link</a>
  </div>
  <div class="col-12 mb-3 col-md-6 text-center leftimage">
    <img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="width:512px;height:640px; float:left" alt="Gmail">
    <div class="clearfix"></div>
    <b> <h3> Google Gmail </h3> </b>
    <p> Gmail </p> <br>
    <a href="" class="btn btn-primary">Link</a>
  </div>
</div>

Но я не рекомендую, вам придется решать проблемы и позже.

Лучшее решение - использовать flexbox, display: flex для css или класс d-flex для надстройки для контейнера. Он будет иметь гибкие возможности для управления макетом.

ОБНОВЛЕНИЕ для css

.left-image-div-container {
  display: flex;
  justify-content: flex-end;
}

.right-image-div-container {
  display: flex;
  justify-content: flex-start;
}

.image-div-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row py-4">
  <div class="col-12 mb-3 col-md-6 text-center leftimage left-image-div-container">
    <div class="image-div-wrapper">
      <img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="width:512px;height:640px;" alt="Google">
      <b><h3> Google </h3></b>
      <p> Google Play Store </p>
      <a href="" class="btn btn-primary">Link</a>
    </div>
  </div>
  <div class="col-12 mb-3 col-md-6 text-center leftimage right-image-div-container">
    <div class="image-div-wrapper">
      <img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="width:512px;height:640px;" alt="Gmail">
      <b> <h3> Google Gmail </h3> </b>
      <p> Gmail </p> <br>
      <a href="" class="btn btn-primary">Link</a>
    </div>
  </div>
</div>

Решение для bootstrap

Оберните ваши изображения и ссылки с divs с d-flex flex-column align-items-center классами. Удалить float из изображений styles. Добавьте к col divs d-flex класс и justify-content-end для первого и justify-content-start для второго.

Смотрите пример во фрагменте.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row py-4">
  <div class="col-12 mb-3 col-md-6 text-center leftimage d-flex justify-content-end">
    <div class="d-flex flex-column align-items-center">
      <img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="width:512px;height:640px;" alt="Google">
      <b><h3> Google </h3></b>
      <p> Google Play Store </p>
      <a href="" class="btn btn-primary">Link</a>
    </div>
  </div>
  <div class="col-12 mb-3 col-md-6 text-center leftimage d-flex justify-content-start">
    <div class="d-flex flex-column align-items-center">
      <img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="width:512px;height:640px;" alt="Gmail">
      <b> <h3> Google Gmail </h3> </b>
      <p> Gmail </p> <br>
      <a href="" class="btn btn-primary">Link</a>
    </div>
  </div>
</div>

Answer 2

<div class="row py-4">
    <div class="col-12 mb-3 col-md-6" >
        <img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="width:512px;height:640px;"  alt="Google">
<div class="caption">
        <b><h3> Google </h3></b>
        <p> Google Play Store </p>
        <a href="" class="btn btn-primary">Link</a>
</div>
    </div>
    <div class="col-12 mb-3 col-md-6">
        <img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="width:512px;height:640px; float:left"  alt="Gmail">
<div class="caption">
            <b> <h3> Google Gmail </h3> </b>
        <p> Gmail </p> <br>
        <a href="" class="btn btn-primary">Link</a>
</div>
    </div>
</div>

Answer 3

Hy,

Сначала удалите float:left и float:right из обоих изображений

А затем вам нужно просто добавить это CSS код.

.leftimage>img{
  display: block;
  margin-left:auto;
  margin-right:auto;
}

Answer 4

используйте этот код, это решит вашу проблему, проблема была вы поместили параметр float в изображение, а не в div , если не работает, пожалуйста, дайте мне знать. благодарю вас. вот ссылка на кодовый блок

https://codepen.io/salmanaabir/pen/VwLLZRG

<div class="row py-4">
<div class="col-12 mb-3 col-md-6 text-center leftimage" style="float:left;">
    <img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="height:640px;text-align:center;"  alt="Google">
    <b><h3> Google </h3></b>
    <p> Google Play Store </p>
    <a href="" class="btn btn-primary">Link</a>
</div>
<div class="col-12 mb-3 col-md-6 text-center leftimage" style="float:right;">
    <img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="height:640px;text-align:center;"  alt="Gmail">
        <b> <h3> Google Gmail </h3> </b>
    <p> Gmail </p> <br>
    <a href="" class="btn btn-primary">Link</a>
</div>

Answer 5

Попробуйте добавить align = "bottom" к тегу изображения или добавьте достаточно перед текстовой строкой, пока она не появится под изображением.