HTML/CSS Image Center Alignment

I have made a website where the homepage looks like the this : I want to move the ficstore logo in the middle and split the bar into two halves and put one on either side , like t

Solution 1:

This is a great time to use flex:

HTML:

<div class='flex-row'>
  <div><img src="left.png"></div>
  <div><img src="center.png"></div>
  <div><img src="right.png"></div>
</div>

CSS:

.flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

Solution 2:

This is one way to do it. I would encourage you to ditch whatever framework you are using. col-x-whatever is bad news bears.

Here's a fiddle too - with an inline-block way.

https://jsfiddle.net/sheriffderek/fcwyg0zb/

inline-block

.images { 
  text-align: center;
}

.images .image-w {
  display: inline-block;
  vertical-align: middle;
}

flexbox

.image-w img {
  display: block;
  width: 100%;
  height: auto;
}

.one {
  max-width: 200px;
}

.two {
  max-width: 400px;
  margin: 0 1rem;
}

.three {
  max-width: 200px;
}

.images {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

<section class='images'>

  <div class='image-w one'>
    <img src='https://placehold.it/300x150' alt='left'>
  </div>
  
  <div class='image-w two'>
    <img src='https://placehold.it/600x300' alt='center'>
  </div>
  
  <div class='image-w three'>
    <img src='https://placehold.it/300x150' alt='right'>
  </div>

</section>

Solution 3:

I suggest you have to have 3 images. The bar should divided in two. Put the Fictore in the middle then add display:block.