如何使图像向左并向右跨<center> ?

Question

I want to make an image left and a <span class="badge badge-primary">v 2.1</span> on right,all these items are on <center> .

code:

<center><div class="card" style="margin-top: 5px; border-style: solid;
  border-color: grey;
  border-radius: 4px; border-width: 4px;">
  <img src="../install/images/brand/logo_wide.webp" alt="Thos Host Billing Software"><span class="badge badge-primary">v 2.1</span>
  <div class="container">
    // something    
  </div>
</div>

Answer 1

<center> tag is obsolete and shouldn't be used. Use flexbox instead because it's much easier.

Flexbox documentation: https://getbootstrap.com/docs/4.4/utilities/flex/

Check out my demo. If you don't use align-items-* class you need to wrap both <img> and <span> in <div> because otherwise it will be stretched vertically.

 img{height:100px}

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <div class="d-flex justify-content-center align-items-center"> <img src="https://img.icons8.com/material/4ac144/256/camera.png" alt=""> <span class="badge badge-primary">v 2.1</span> </div>