CODEWITHSUNDEEP
bootstrap-4vertical-alignment
giò
giò

Reputation: 3600

Align text vertically with an image

I have this:

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

With an image on right of the text. The problem is that the text and image are not aligned. How can align the text vertically in the center, so the output is this one?

enter image description here

Upvotes: 0

Views: 49

Answers (3)

HelloIT
HelloIT

Reputation: 172

Assign a padding-top:0.7em to the span tag 

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

Upvotes: 0

Mohamed Farouk
Mohamed Farouk

Reputation: 1107

.m-3-img { margin: 0.25rem; margin-left: 0.5rem; }
<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>

Upvotes: 0

A. Meshu
A. Meshu

Reputation: 4148

Seems that you should omit the float-right from the image and change the order on the markup. Snippet:

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

Upvotes: 3

Related Questions