HTML / CSS image center alignment
I made a site that looks like the home page:
I want to move the ficstore logo in the middle and split the panel into two halves and place one on each side, for example:
I split the bar image into two different parts for each side and tried to put the images in different columns. But it just doesn't work.
This is a snippet of 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 anyone please help?
I have also tried the following code:
<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;
}
+1
source to share
3 answers
This is one way to do it. I would suggest that you use whatever framework you are using. col-x-whatever
Bad news.
Here, too, a violin - with a built-in block.
https://jsfiddle.net/sheriffderek/fcwyg0zb/
built-in unit
.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>
0
source to share