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>
Related
I've tried using text-align and justify-content but both of them refuse to work. I think I've made a mistake with all the spacings.
Here's the HTML:
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
}
.contents1 {
display: flex;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1>This website is awesome</h1>
<p>This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
Put the justify-contents and align-items into class image
.container1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.image{
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
}
It is a good practice to first add some background-color to better see where each element is and then remove these dumb colors.
For the container which has a display:flex, please add
width:100%;
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 75%;
margin: auto;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 75%
height: 200px;
margin: auto;
}
.contents1 {
display: flex;
flex-direction: column;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1 class="center">This website is awesome</h1>
<p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
Assuming you want to center the container1 div with the image placeholder div, the issue is that your divs don't have an assigned with. Set their width to a percentage less than the parent and then use the CSS property margin: auto. You will also need to apply flex-direction: column to your parent div, contents1
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 400px;
margin: auto;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
margin: auto;
}
.contents1 {
display: flex;
flex-direction: column;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1 class="center">This website is awesome</h1>
<p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
I have this image and this box I'm trying to put on the same line. The box is just going to be holding a header and some text, but I can't seem to get them on the same line. I'm using flexbox and I did some research into this, but can't quite work it out. Here's the code:
#container {
min-height: 95vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
height: 400px;
width: 600px;
background-color: #f5f2ed;
text-align: justify;
padding: 20px;
}
img {
width: auto;
height: 400px;
border-radius: 16px;
}
<div id="container">
<div class="main">
<img src="/">
<div class="box">
<h2>hello</h2>
<p>paragraph here...</p>
</div>
</div>
</div>
I made two divs inside the container because the image is going to be outside the box with the text.
Maybe display: flex; in .main{} can fix the problem.
You should add display:flex property to main element and flex :1 property to both child elements of main element
#container {
min-height: 95vh;
}
.main {
display : flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
height: 400px;
width: 50%;
flex : 1;
background-color: #f5f2ed;
text-align: justify;
padding: 20px;
}
img {
width: auto;
height: 400px;
flex : 1;
border-radius: 16px;
}
<div id="container">
<div class="main">
<div class="pic-div">
<img src="/">
</div>
<div class="box">
<h2>hello</h2>
<p>paragraph here...</p>
</div>
</div>
</div>
I'm trying to create a Slider Layout with flex boxes, like this photo :
Here I've big photo at right side and thumbnail items on the left. I want to align left side and thumbnails wrapper with big photo height. But unfortunately It's not possible only with flex boxes and I should check big photo height with JavaScript and align left side with that.
For example check this code:
main{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper{
width: 500px;
overflow: hidden;
background: gray;
display: flex;
align-items: flex-start;
justify-content: center;
}
.right{
width: calc(100% - 150px);
height: 450px;
background: red;
}
.left{
width: 150px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
}
.item{
width: 100%;
height: 50px;
color: white;
background: green;
display: flex;
align-items: center;
justify-content: center;
}
<main>
<div class="wrapper">
<div class="left">
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
</div>
<div class="right"></div>
</div>
</main>
In sample code I've not image and I handled this issue with 450px height in CSS.
So how can I align the left side with out JS and only with CSS? I want to use space-between mode to show all items in this height. Consider it, height:100% didn't work for this issue.
As per my comment, in order for your left column to extend to the height of your right column, all you need to do is remove the align items from your wrapper:
main{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper{
width: 500px;
overflow: hidden;
background: gray;
display: flex;
/* align-items: flex-start; -- remove this */
justify-content: center;
}
.right{
/* width: calc(100% - 150px); I would swap this for flex grow, then you don't need hard values */
flex-grow: 1;
height: 450px;
background: red;
}
.left{
width: 150px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
}
.item{
width: 100%;
height: 50px;
color: white;
background: green;
display: flex;
align-items: center;
justify-content: center;
}
<main>
<div class="wrapper">
<div class="left">
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
</div>
<div class="right"></div>
</div>
</main>
This solution uses CSS Grid layouts - use display: grid on your wrapper that lays out your left and right sections using grid-template-columns: 150px 1fr (remove the width definitions in right and left elements.).
Now add height: 100% to left and then for the items flex: 1 for the flexbox items to occupy the dynamic height coming from the right section - see demo below:
main {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
width: 500px;
overflow: hidden;
background: gray;
display: grid; /* make this a grid container */
grid-template-columns: 150px 1fr; /* 150px for left and rest for right*/
align-items: flex-start;
justify-content: center;
}
.right {
/* width: calc(100% - 150px);*/
height: 450px;
background: red;
}
.left {
/*width: 150px;*/
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
height: 100%; /* ADDED */
}
.item {
width: 100%;
height: 50px;
color: white;
background: green;
display: flex;
align-items: center;
justify-content: center;
flex: 1; /* ADDED */
}
<main>
<div class="wrapper">
<div class="left">
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
</div>
<div class="right"></div>
</div>
</main>
Something like this can be done with flexbox, if you set the height of the container to be the height you want all your sliders to be:
.container {
display: flex;
flex-flow: column wrap;
height: 250px;
width: 250px;
}
.container > * {
display: flex;
flex-flow: row wrap;
flex: 1 100%;
}
.thumbs {
flex-direction: row;
margin-right: 5px;
}
.thumb {
background: red;
flex: 1 100%;
margin: 5px 0;
}
.large {
background: blue;
margin: 5px;
}
<div class="container">
<div class="thumbs">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="large"></div>
</div>
Is it possible to use flexbox to center vertically and horizontally for background color purposes?
.wrapper {
display: flex;
width: 100vw;
height: 100vh;
text-align: center;
}
.item {
flex: 1;
background-color: green;
align-self: center;
justify-content: center;
}
<div class='wrapper'>
<div class='item'>
sdafsdfs
</div>
</div>
If I add a height: 100% the text moves back to the top.
Add display: flex for your items. Then only it can align items inside it as per your requirements. Please have a look at the updated code.
.wrapper {
display: flex;
width: 100vw;
height: 100vh;
text-align: center;
}
.item {
display: flex;
background-color: green;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
<div class='wrapper'>
<div class='item'>
sdafsdfs
</div>
</div>
Hope this help
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>