0
votes

Aligner le texte verticalement avec une image

J'ai ceci:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="d-flex mb-3">
    <div class="align-self-center border rounded p-2">
      <img src="https://via.placeholder.com/16" class="float-right m-3">
      Text
    </div>
  </div>
</div>

Avec une image à droite du texte. Le problème est que le texte et l'image ne sont pas alignés. Comment aligner le texte verticalement au centre, pour que le résultat soit celui-ci?

bootstrap-4 vertical-alignment

0 commentaires

3 Réponses :

3
votes

Il semble que vous devriez omettre le float-right de l'image et changer l'ordre sur le balisage. Extrait:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="d-flex mb-3">
    <div class="align-self-center border rounded p-2">
      Text
      <img src="https://via.placeholder.com/16" class="m-3">
    </div>
  </div>
</div>

0 commentaires

0
votes

Attribuez un padding-top: 0.7em à la balise span

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="d-flex mb-3">
    <div class="row align-self-center border rounded p-2">
		<span style="float:left;padding-top:0.7em">Text</span>
		<img src="https://via.placeholder.com/16" class="m-3"></img>
    </div>
  </div>
</div>

0 commentaires

0
votes

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="d-flex mb-3">
    <div class="align-self-center border rounded p-2">
      <img src="https://via.placeholder.com/16" class="float-right m-3-img">
      Text
    </div>
  </div>
</div>

.m-3-img { margin: 0.25rem; margin-left: 0.5rem; }

0 commentaires