HTML / CSS图像中心对齐

Question

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

I've split my bar image into two different parts for each side and tried to put the images in different columns. But it just doesn't seem to work.

This is the snippet for the current code :

<div class="container">
    <div class="row">
        <div class="col-xs-8">
                        <h2 style="font-family:helvetica;"><span>Home Page</span></h2>

        </div>
        <div class="col-xs-4">
            <img src="http://lorempixel.com/400/200/" class="img-responsive right" style="width:400px; z-index:1;" />
        </div>
        <img src="http://lorempixel.com/400/200/" class="img-responsive right" style="position: absolute; margin-top: 135px; z-index: -2;" />
    </div>
<hr class="style18" />

Can someone help?

I've tried the following code as well :

<div class="container">
    <div class="row">
        <div class="col-xs-8">
            <h2 style="font-family:helvetica;"><span>Book Info</span></h2>
        </div>
        <div class="flex-row">
            <div>
                <img src="http://lorempixel.com/400/200/" class="img-responsive right" style="width:400px; z-index:1;" />
            </div>
            <div>
                <img src="http://lorempixel.com/400/100/" class="img-responsive right" style="position: absolute; margin-top: 135px; z-index: -2;" />
            </div>
            <div>
                <img src="http://lorempixel.com/400/100/" class="img-responsive right" style="position: absolute; margin-top: 135px; z-index: -2;" />
            </div>
        </div>
    </div>
<hr class="style18" />

Css :

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

Answer 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;
}

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

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