0
votes

Bootstrap 4 centre (horizontalement) image + texte à l'intérieur de div

bootstrap 4: strong>
Comment concentrer horizontalement un div contenant une image et un texte à droite de l'image? XXX Pré>

J'ai essayé de faire trois colonnes à l'intérieur d'une rangée, P>

<div class="row">
    <div class="col"></div>
    <div class="col-auto">
        <img src="..." width="..." height="..." />
        <h1 class="display-5 m-0">...</h1>
        <p class="lead">...</p>
    </div>
    <div class="col"></div>
</div>

html css bootstrap-4

0 commentaires

3 Réponses :

2
votes

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center">
    <div class="col-3">
        <img src="https://pixlr.com/photo/image-design-11-1-pw.jpg" style="width: 100%;height: 100%;" />
    </div>
    <div class="col-9">  
        <h5>Hello World</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p>
    </div>
</div>

1 commentaires

Ce n'est pas centré.

0
votes

Essayez ce code

  <div class="text-center">
      <div class="row justify-content-md-center">
        <div class="col-md-auto">
          <img src="https://placehold.it/100x100">
        </div>
        <div class="col-md-auto">
            <h1 class="display-5 m-0">...</h1>
            <p class="lead">...</p>
        </div>
      </div>
    </div>

4 commentaires

L'image n'est pas à gauche du texte.

Sur l'écran plus petit? Ou même un écran plus grand?

13 ". L'espace entre l'image et le texte est énorme.

réponse mise à jour. S'il vous plaît vérifier s'il s'agit de savoir comment vous avez besoin

0
votes

Je l'ai compris. XXX

0 commentaires