How do I vertically center these pairs of images?
I've searched everywhere and tried the align-items: center property with no success.
.first {
display: flex;
justify-content: center;
align-items: center;
}
.first img {
width: 580px;
height: 50vh;
}
.second {
display: flex;
justify-content: center;
}
.second img {
padding-top: 2px;
width: auto;
height: 290px;
}
<div class="first">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
<div class="second">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
<img src="https://68.media.tumblr.com/64123ccb4f9358207ae32b94646138ca/tumblr_ni9bysrHCt1sh9i3lo1_1280.jpg" alt="">
</div>
https://jsfiddle.net/jsxor8a1/
EDIT:
I don't know if this is the right way but it fixed it. I added a margin-top: 25vh; to the top of the first image and that positioned it perfectly in the center.
.first {
display: flex;
justify-content: center;
align-items: center;
}
.first img {
margin-top: 25vh;
width: 580px;
height: 25vh;
}
.second {
display: flex;
justify-content: center;
}
.second img {
padding-top: 2px;
width: 290px;
height: 25vh;
}
<div class="first">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
<div class="second">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
<img src="https://68.media.tumblr.com/64123ccb4f9358207ae32b94646138ca/tumblr_ni9bysrHCt1sh9i3lo1_1280.jpg" alt="">
</div>
Related
I am trying to vertical align a image on my header. That is my actual code, I have it horizontall aligned into center.
header {
background-color: blue;
height: 118px;
width: 1024px;
text-align: center;
}
.container {
margin-left: auto;
margin-right: auto;
width: 1024px;
}
<div class="container">
<header>
<img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
</header>
</div>
I tried search for a solution and could get it vertical aligned on center but then cant get it horizontal anymore with text-align:
header {
background-color: blue;
height: 118px;
width: 1024px;
text-align: center;
display: flex;
align-items: center;
}
.container {
margin-left: auto;
margin-right: auto;
width: 1024px;
}
<div class="container">
<header>
<img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
</header>
</div>
I am just really starting HTML+CSS. Any suggestions?
Using Flexbox, you can add to your flex element the property justify-content:center
In this css-tricks article you can find a good examples about how to center elements.
header {
background-color: blue;
height: 118px;
width: 1024px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.container {
margin-left: auto;
margin-right: auto;
width: 1024px;
}
<div class="container">
<header>
<img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
</header>
</div>
Simply add 'justify-content: center' to your flex container.
header {
background-color: blue;
height: 118px;
width: 1024px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.container{
margin-left:auto;
margin-right:auto;
width: 1024px;
}
img { display:block }
<div class="container">
<header>
<img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
</header>
</div>
You have to add justify-content: center; to header.
header {
background-color: blue;
height: 118px;
width: 1024px;
text-align: center;
display: flex;
align-items: center;
}
I hope this will help you.
I have two image files and
I want to arrange the two like the image but I don't know how...
HTML
<div class="header">
<img class="header_menu" src={ic_menu} alt="" />
<img class="header_logo" src={logo_image} alt="" />
</div>
CSS
.header {
display:flex;
justify-content: center;
}
.header_logo {
vertical-align:bottom;
display:flex;
width: 300px;
align-items: flex-end
}
.header_menu {
display:flex;
vertical-align:bottom;
text-align: left;
width: 30px;
height: 30px;
align-items: flex-end;
}
I would use float left for the logo, and hmm maybe position absolute will do better.
.header {
display: flex;
justify-content: center;
position: relative;
border: 1px solid red;
}
.header_logo {
vertical-align: bottom;
display: flex;
width: 300px;
align-items: flex-end
}
.header_menu {
position: absolute;
width: 30px;
height: 30px;
left: 0;
bottom: 0;
}
img {
border: 1px solid yellow;
height: 50px;
}
<div class="header">
<img class="header_menu" src={ic_menu} alt="" />
<img class="header_logo" src={logo_image} alt="" />
<div style="clear:both"></div>
</div>
The second div stacks on top of the first div and the first div invisible
How can i position it below the first div
.shop {
width: 100%;
height: 1000px;
background-color: #ffffff;
position: relative;
justify-content: center;
display: flex;
}
.bell {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
<div class="shop"></div>
<div class="bell">
<img src="bell.png" alt="">
</div>
Is this what you are trying to do ? :)
.shop {
width: 100%;
height: 1000px;
background-color: #000;
justify-content: center;
display: flex;
}
.bell {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
img{
width : 30%;
}
<div class="shop"></div>
<div class="bell">
<img src="https://images.pexels.com/photos/1289845/pexels-photo-1289845.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
Why does flex center stretch my image instead of centering it?
css:
.flex-centre {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
height: 100%;
width: 100%;
}
HTML:
<div style="height: 400px; width: 400px; background: #ccc">
<div class="flex-centre">
<img class="img-responsive" src="http://placekitten.com/g/200/200" alt="">
</div>
</div>
Result:
Any ideas?
jsfiddle
You have set flex-direction: column and now main axis is Y and cross axis is X. So because align-items distribute items along cross-axis (and default value of align-items is stretch) now you want to use align-items: center to position your image horizontally and prevent image to stretch.
.flex-centre {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
width: 100%;
}
<div style="height: 400px; width: 400px; background: #ccc">
<div class="flex-centre">
<img class="img-responsive" src="http://placekitten.com/g/200/200" alt="">
</div>
</div>
Another option is to set left and right margin of image to auto
.flex-centre {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
height: 100%;
width: 100%;
}
img {
margin: 0 auto;
}
<div style="height: 400px; width: 400px; background: #ccc">
<div class="flex-centre">
<img class="img-responsive" src="http://placekitten.com/g/200/200" alt="">
</div>
</div>
So I already researched this briefly. I put an img in a div and made the img width 100%, which should have an impact on the height. I'm not understanding what's going on here. I just need my images to remain to their proper aspect ratio in the following flexbox.
.container {
display: flex;
position: relative;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
height: 100vh;
width: 80%;
/*padding-top: 2%;
padding-bottom: 18%;
margin: 5% auto 8% auto; */
background-color: white;
border: 2px solid red;
}
.top {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
border: 2px solid blue;
}
.top * {
1 1 50%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
height: 100%;
}
.bottom {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
border: 2px solid orange;
}
.top,
.bottom {
flex: 0 0 100%;
height: 50%;
}
.topa {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
width: 50%;
height: 100%;
background-color: orange;
}
.topa div img {
width: 100%;
}
<div id="bigwrap">
<div class="container">
<div class="top">
<div class="topa">
<div>
<img src="http://placehold.it/209x205" width="209" height="205" alt="Picture of kid" />
</div>
<div>
<img src="http://placehold.it/209x205" width="209" height="205" alt="Picture of kid" />
</div>
</div>
<div class="topb">
</div>
</div>
<div class="bottom">
</div>
</div>
</div>
You are not using flexbox in the right way.
To do what you want margin:auto on .topa is enough...
Here is a css-tricks article to explain very weel how flexbox works
.container {
position: relative;
height: 100vh;
width: 80%;
background-color: white;
border: 2px solid red;
}
.top {
border: 2px solid blue;
}
.top * {
height: 100%;
}
.bottom {
border: 2px solid orange;
}
.topa {
width: 50%;
height: 100%;
background-color: orange;
margin: auto;
}
.topa div img {
width: 100%;
}
<div id="bigwrap">
<div class="container">
<div class="top">
<div class="topa">
<div>
<img src="http://placehold.it/209x205" width="209" height="205" alt="Picture of kid" />
</div>
<div>
<img src="http://placehold.it/209x205" width="209" height="205" alt="Picture of kid" />
</div>
</div>
<div class="topb">
</div>
</div>
<div class="bottom">
</div>
</div>
</div>
Use max-width for your image in CSS. And remove width?and height atribute from image tag. Or use height property auto in your img tag and css is-
.topa div img {
Max-width: 100%;
Height:auto;
}