float: right; messes up the vertical alignment of elements in HTML

Question

I was trying to align these two vector images (instagram and mail) to the right of the div using CSS.

main.css:

.vector{
    height: 35px;
    width: 35px;
}

index.html:

<head>
      <div class="container-fluid p-2 bg-primary text-white">
        <a href="index.html"><img class="logo" src="../public/img/alazkanat2.png"></a>
        <a><img class="vector" src="../public/img/instagram.png"></a>
        <a><img class="vector" src="../public/img/mail.png"></a>
      </div>
</head>

I tried to align using (in main.css) by adding float: right;:

.vector{
    height: 35px;
    width: 35px;
    float: right;
}

Resulted with:

I've tried couple of methods however some didn't even affect the images and some made it worse.
I also tried Why does the vertical alignment stop working when 'float: right' is being used? which is a similar problem to mine but didn't do anything.
(NOTE: Please comment if you need more details from the code)

Mmm, perhaps a [flex box](https://www.geeksforgeeks.org/how-to-right-align-flex-item/) could be of use — Yarin_007, Dec 04 '22 at 17:47
@Yarin_007 I tried now it but aligned to the left bottom corner? — c0rrupted, Dec 04 '22 at 17:50

John Li · Accepted Answer · 2022-12-04T18:23:07.257

While not tagged, it seems that the posted code is using bootstrap. The below example will use bootstrap classes so that it might integrate better.

Perhaps try use d-flex (display: flex) on the container with align-items-center (align-items: center).

Give the first item a mr-auto (margin-right: auto) so it pushes the other icons to the right.

Example:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<header>
  <div class="d-flex align-items-center container-fluid p-2 bg-primary text-white">
    <a href="#" class="mr-auto"><img class="logo" src="https://picsum.photos/100"></a>
    <a><img class="vector" src="https://picsum.photos/50?random=1"></a>
    <a><img class="vector" src="https://picsum.photos/50?random=2"></a>
  </div>
</header>

float: right; messes up the vertical alignment of elements in HTML

1 Answers1