I want to center the 2 images but the images are being stretched out of proportion because of display: flex but justify-content wont work without it
is there another solution to centering the images?
<div class="column-photo">
<div class="center">
<img src="img/2.%20GenerationAnxiety%20page%202,2.png"
style="width:40vw;">
<img src="img/3.%20GenerationAnxiety%20page%203,3.png"
style="width:40vw;">
</div>
column-photo {
flex-wrap: wrap;
flex: 33.33%;
}
.center {
display: flex;
justify-content: center!important;
align-content: center!important;
}
You have missed dot with class column-photo.
Alternate way without specific width
.column-photo {
text-align:center;
display:block;
}
.center {
display:inline-block;
float:none;
}
If you want stretch the images but keep the aspact ratio you should wrap the images in a div with a individual width. Then you can give the image a width of 100% to keep the aspact.
If you should use vw in this case is another question
<div class="column-photo">
<div class="center">
<div class="img-container" style="width: 40vw">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="img-container" style="width: 40vw">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
</div>
img{
width: 100%;
}
Looks like you've messed up some properties:
.center {
display: flex;
justify-content: center;
align-items: center;
}
<div class="center">
<img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg" style="width:10vw;">
<img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg" style="width:20vw;">
</div>
Related
I am trying to figure out how to make a section of divs on my page responsive so that as the page is minimized, the divs begin stacking on top of each other. I've tried flex-direction: column but that doesn't seem to be working. I have attached photos of what I am trying to achieve.
Here is my HTML:
<div>
<!-- <section> -->
<center>
<div class="container">
<div class="item3">
<image-tag src="https://></image-tag>
</div>
<div class="item3">
<image-tag src="https://></image-tag>
</div>
<div class="item3">
<image-tag src="https://></image-tag>
</div>
<div class="item3 idk">
<image-tag src="https://></image-tag>
</div>
<div class="item3 idk">
<image-tag src="https://></image-tag>
</div>
</div>
</center>
<!-- </section> -->
</div>
CSS
.container {
display: flex;
flex-direction: row;
}
Photos of what I am trying to achieve
Desktop
Tablet
Mobile
FYI I have taken some code out for confidentiality purposes.
try flex-wrap: wrap;
use .item3{ flex: 1 } if needed
A flex-box solution is hard because it is meant for 1 directional layouts where as your desired layout is 2 directional based on screen width. However, you can come close to the desired layout behavior by using flex-wrap which depends on either the width of your flex-items or flex-container to force the items to a new line. Try the below and adjust either the items' or container's width
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: start;
}
You can give max-width: 1200px; to your body element then
margin:0 auto to center vertically.
Than create a flexbox inside container class and make flex-wrap: wrap; to make flexbox create new row else all the images will always stay in same row.
You can also add padding: 0 1rem; for always having empty spaces when images comes to limit of wrapping.
/* RESET */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: antiquewhite;
min-height: 100vh;
max-width: 1200px;
margin: 0 auto;
}
img {
max-width: 100%;
display: block;
}
/* RESET ENDS */
.container {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
padding: 0 1rem;
}
<div class="container">
<div class="item">
<img src="https://source.unsplash.com/random/375x375" alt="" />
</div>
<div class="item">
<img src="https://source.unsplash.com/random/375x375" alt="" />
</div>
<div class="item">
<img src="https://source.unsplash.com/random/375x375" alt="" />
</div>
<div class="item">
<img src="https://source.unsplash.com/random/375x375" alt="" />
</div>
<div class="item">
<img src="https://source.unsplash.com/random/375x375" alt="" />
</div>
</div>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 1 year ago.
I have two elements: a back-button and a Headline. Both should be in the same row, the back button should be left aligned and the Headline should be centered.
Let's take this example:
<div class="wrapper">
<div class="button">
<button>Back</button>
<div class="headline">
<h2>Headline</h2>
</div>
</div>
</div>
What do I have to do in CSS to get this result:
Image
I tried using Translate X, but of course this solution isn't a responsive one, that's why I am searching one for all view-ports.
Big thanks and have a good rest of the weekend!
Center everything in wrapper using flexbox, then move button to the left with absolute positioning.
.wrapper {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
button {
position: absolute;
left: 0;
}
<div class ="wrapper">
<button>Back</button>
<h2>Headline</h2>
</div>
Here's an easy way to do this if you know that it'll just be these 2 elements inside of the .wrapper container.
What you do is set the .wrapper to position: relative;, then set .button to position: absolute; this will allow you to position the .button inside of the .wrapper without taking up any space inside of the div. Then you set the .header to width: 100%; and text-align: center;
You'll need to play around with mobile, since the button will span over the header, at that point I would probably stack the elements to make it easier to for the user to click the back button.
.wrapper {
position:relative;
background: #dedede;
}
.button {
position:absolute;
left:0;
top:50%;
transform:translate(0, -50%);
}
.headline {
width:100%;
text-align:center;
}
<div class ="wrapper">
<div class="button">
<button>Back</button>
</div>
<div class ="headline">
<h2>Headline</h2>
</div>
</div>
This solution is using css flex.
.wrapper{
display: flex;
flex-direction:row;
justify-content: flex-start;
align-items: baseline;
}
.headline{
display: flex;
flex-direction:row;
justify-content: center;
width:100%;
}
<div class ="wrapper">
<div class="button">
<button>Back</button>
</div>
<div class ="headline">
<h2>Headline</h2>
</div>
</div>
<div class="wrapper">
<div class="button" style="float: left;">
<button>Back</button>
</div>
<div class="headline">
<h2 style="text-align: center;">Headline</h2>
</div>
</div>
Actually, this is not exactly what you want.
But very simple and tricky way.
Another easy way using css flex:
.wrapper {
display: flex;
align-items: center;
}
.headline {
margin: auto;
}
<div class ="wrapper">
<div class="button">
<button>Back</button>
</div>
<div class ="headline">
<h2>Headline</h2>
</div>
</div>
using CSS GRID
this is responsive! centered,
and all the CSS code is in the parent selector!
(with flex, you will write a lot for this simple thing)
explanation
place-items are for centering. (is like writing justify-.. and align-..)
grid-template-column is for specifying how the grid should be (there are many ways to set the grid, but this is the shortest)
in fact, AUTO gets the width of the element and set to it, but 1FR gets
(AllWidthParent-AutoChildWidth)
Code
<div class="wrapper">
<div class="button">
<button>Back</button>
</div>
<div class="headline">
<h2>Headline</h2>
</div>
</div>
<style>
.wrapper {
display: grid;
grid-template-columns: auto 1fr;
place-items: center;
width: 100%;
}
</style>
https://jsfiddle.net/laaouatni/vg5L38am/1/
I try to develop website for my portfolio. I want to do something like that :
But I've some problem with the 3 icons for Twitter/Instagram and Deviantart. To put the icons like that, I use the flexbox in html. Currently, I've that :
#conteneur {
display: flex;
justify-content: space-between;
}
<div id="conteneur">
<div class="element1">
<img src="https://zupimages.net/up/21/29/vbxh.png">
</div>
<div class="element2">
<img src="https://zupimages.net/up/19/51/4gl0.png">
</div>
<div class="element3">
<img src="https://zupimages.net/up/21/29/dbtc.png">
</div>
</div>
Test with CodePen here : https://codepen.io/lucbenedet/pen/yLbPMgK
But as you can see, the pictures are too large and when I try to put the pictures to a size of 35px like that :
#conteneur
{
display: flex;
justify-content: space-between;
width: 35px;
}
or
.element1
{
width: 35px;
}
The resize doesn't works...
Someone to show how to do that ?
You can update your CSS with following code.
#conteneur {
display: flex;
justify-content: space-between;
width: 150px;
padding: 10px;
}
#conteneur div img {
width: 35px;
height: 35px;
}
<div id="conteneur">
<div class="element1">
<img src="https://zupimages.net/up/21/29/vbxh.png">
</div>
<div class="element2">
<img src="https://zupimages.net/up/19/51/4gl0.png">
</div>
<div class="element3">
<img src="https://zupimages.net/up/21/29/dbtc.png">
</div>
</div>
You can have some space between icons when you maximize the width of the container
you can reset width on the flex-container to max-content (3 icones shouldnot overflow) and use gap to set a distance in between them.
You could use em for the gap and icon's width to have a coherent render.
Possible example:
#conteneur {
display: flex;
width: max-content;
align-items: center;
margin: auto;
gap: 1.6em;
}
#conteneur div img {
width: 3em;
}
<div id="conteneur">
<div class="element1">
<img src="https://zupimages.net/up/21/29/vbxh.png">
</div>
<div class="element2">
<img src="https://zupimages.net/up/19/51/4gl0.png">
</div>
<div class="element3">
<img src="https://zupimages.net/up/21/29/dbtc.png">
</div>
</div>
possible example from your codepen https://codepen.io/gc-nomade/pen/qBmVjBV
I'm trying to have 1 image on the top with 2 images below it spanning half the width of the image on top. The problem I'm encountering are aligning issues with the 2 images in which they don't fit nicely below the top image but spaced perfectly to the sides. I'm trying to have the 2 images be below the top image perfectly aligned in the center with no spaces below. As I shrink the window, that is when it looks like I want it to on a full screen except without the spaces. I also want them perfectly aligned in the center of the screen.
https://jsfiddle.net/voryuja8/
.first {
display: flex;
}
.first img {
margin: auto;
max-width: 800px;
}
.second {
display: flex;
}
.second img {
margin: auto;
flex: 1;
max-width: 400px;
}
<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="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>
Just remove margin:auto from the images and use justify-content: center in the flex containers.
.first {
display: flex;
justify-content: center;
}
.first img {
max-width: 800px;
}
.second {
display: flex;
justify-content: center;
}
.second img {
flex: 1;
max-width: 400px;
}
<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="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>
This might be a bit better, as it doesn't rely on setting pixel values for anything: https://jsfiddle.net/voryuja8/1/
HTML:
<div class="second">
<div class="flex-child">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>
<div class="flex-child">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>
</div>
CSS:
img {
max-width: 100%;
}
.second {
display: flex;
}
.flex-child {
flex-grow: 1;
flex-shrink: 1;
}
I've had difficulty figuring out how to cleanly do precicely what I am asking in the title.
Say for example I have a something like this:
<div class="image-row">
<img src="image1">
<img src="image2">
<img src="image3">
<img src="image4">
<img src="image5">
</div>
I have seen answers to similar questions, but they don't deal with the issue of spreading mixed width elements across a responsive parent element.
In something like Photoshop, this is called "Distribute horizontal centers". Here is an example I made in photoshop (500px wide image-row):
here are the same boxes when image-row is stretched to 900px wide:
Note that the gaps between the images are not necessary even, the the spread is even based on the horizontal centers of the objects.
How can I accomplish this basic idea in css?
You may use text-align:justify and a pseudo for older browser or use the display:flex properties for latest browsers.
.image-row {
width: 500px;
border: solid;
margin: 1em auto;
}
img {
vertical-align: top;
}
.justify {
font-size: 0.01px;
text-align: justify;
}
.justify:after {
content: '';
display: inline-block;
width: 99%;
vertical-align: top;
height: 0;
}
.space-between {
display: flex;
justify-content: space-between
}
<div class="image-row justify">
<img src="http://lorempixel.com/120/50">
<img src="http://lorempixel.com/50/50">
<img src="http://lorempixel.com/80/50">
<img src="http://lorempixel.com/70/50">
<img src="http://lorempixel.com/30/50">
</div>
<div class="image-row space-between">
<img src="http://lorempixel.com/75/50">
<img src="http://lorempixel.com/30/50">
<img src="http://lorempixel.com/100/50">
<img src="http://lorempixel.com/50/50">
<img src="http://lorempixel.com/80/50">
</div>
Try this:
html
<div class="table">
<div class="image-row">
<div><img src="image1"></div>
<div><img src="image2"></div>
<div><img src="image3"></div>
<div><img src="image4"></div>
<div><img src="image5"></div>
</div>
</div>
css
.table{
display: table;
width: 100%;
}
.image_row {
diplay:table-row;
}
.image_row div {
display: table-cell;
text-align: center; /* if you want to be centered */
}
.image_row div img {
display:block;
max-width: 100%;
}
You can use a flex display and set justify-content to space-between. You can do that on your image-row class:
.image-row {
display: flex;
justify-content: space-between;
}
The point is to use this class on the container div.