Basically I want to center within a div tag with a class name container 4 pictures looking like a windows. Here is my code
<div class="container">
<div class = "arriba">
<img class = "pic" src="img/il00.jpg">
<img class="pic" src="img/web00.png">
</div>
<div class="abajo">
<img class="pic" src="img/logo.jpg">
<img class="pic" src="img/w.png">
</div>
</div>
here is my css
.container{
display: grid;
left: 50%;
}
img.pic{
padding: 5px;
object-fit: cover;
width: 360px;
height: 360px;
}
add this css
.container > *{ margin : auto }
or yo can see at this link https://jsfiddle.net/eq7p391a/
You can also add justify-content: center in container
DEMO
.container{
display: grid;
justify-content: center;
width:100%;
}
Related
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 doing some flex-grid and having problems getting inline images to scale their dimensions to match the height of a flex-grown box.
I have a flexbox column where I have a title and a wrapper that will grow to whatever space is leftover. Inside the wrapper is list of images that I would like to all have the same height and be inline. No matter what I do the images end up to the right of the title and outside the dimensions of the flexbox. Any help would be appreciated. Bad drawing included on what I would like vs what I currently get
Link to fiddle: https://jsfiddle.net/oan5fmtb/1/
<div class="container">
<h4>Title</h4>
<div class="imgs">
<img src="..." class="img">
<img src="..." class="img">
<img src="..." class="img">
<img src="..." class="img">
...
</div>
</div>
.container {
height: 170px;
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.imgs {
flex: 1;
/* Not sure if I need anything else here */
}
.img {
display: inline;
/* Not sure what to do */
}
Please try this,
.container {height: 170px;width: 100%;border: 1px solid black;}
.imgs {display: flex;}
.img{width:60px;height:60px;margin-right: 10px;}
It works as expected
Found the solution thanks to this answer.
<div class="container">
<h4>Title</h4>
<div class="imgs">
<img src="..." class="img">
<img src="..." class="img">
</div>
</div>
.container {
height: 170px;
width: 100%;
display: flex;
flex-direction: column;
border: 1px solid black;
}
.imgs {
flex: 1;
min-height: 0;
border: 1px solid red;
}
.img {
height: 100%;
width: auto;
}
I found out that a flex item cannot shrink smaller than the size of their content, min-height: 0 will fix this.
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>
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;
}
The issue I am facing here has to do with the fact that the total width of the child divs is larger than the width of the parent div. I need the child divs to float to the left of each other even if they overflow the parent div.
I have this HTML:
<div class="gallery_container">
<div id="viewport">
<div class="gallery_img_container">
<img src="images/1/1.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="images/1/2.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="images/1/3.png" class="gallery_img">
</div>
</div>
</div>
And this CSS:
.gallery_container {
width: 70%;
height: 100%;
float: left;
background-color: #171717;
}
#viewport {
height: 100%;
width: 100%;
}
.gallery_img_container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.gallery_img {
height: 95%;
}
How can I get all divs with of class gallery_img_container to float to the left of each other? I've tried adding float:left .gallery_img_container but it doesn't do anything. They go underneath each other instead of side by side.
Another note is that .gallery_img_container must have the display:flex property
Thanks in advance for any help!
EDIT: .gallery_img_container must have the width:100% property
You have "width:100%;" applied to the ".gallery_img_container" class causing each container to break into next line, remove this and add "float: left;" then it will work.
Edited based on comments.
.gallery_container {
width: 70%;
height: 100%;
background-color: #171717;
}
#viewport {
height: 100%;
width: 100%;
display: flex;
}
.gallery_img_container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
}
.gallery_img {
height: 95%;
}
<div class="gallery_container">
<div id="viewport">
<div class="gallery_img_container">
<img src="images/1/1.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="images/1/2.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="images/1/3.png" class="gallery_img">
</div>
</div>
</div>
Farasat,
I'm not entirely sure what you are trying to accomplish. Let me see if I can confirm what I think you are seeking. You want to achieve a result where you have a set of images which are, collectively, wider than #viewport, but you want them to keep "piling up" to the right. That is, you don't want them to wrap. If we consider [] the bounds of the viewport and # to be an image, you want (for example), something like this:
[#]##
Is this right?
If so, I think a key thing to note is that your gallery_img_container is of display flex, which means it is a block, not inline, style. This will cause the gallery_img_containers to stack, not flow to the right.
I think all you need to do is to say "white-space: nowrap;" in #viewport (to keep things from wrapping), and then to make gallery_img_container to be of type inline-flex, so that they do not stack.
I'm attaching an example to hopefully demonstrate what I mean (notes: I just grabbed a random image off the web to make this more concrete. Also note that since your gallery_img_container is 100%, each image is the size of the #viewport. I'm not sure if that's what you want).
.gallery_container {
width: 70%;
height: 100%;
background-color: #171717;
}
#viewport {
height: 100%;
width: 100%;
white-space: nowrap;
}
.gallery_img_container {
width: 100%;
height: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
}
.gallery_img {
height: 95%;
}
<div class="gallery_container">
<div id="viewport">
<div class="gallery_img_container">
<img src="https://wildfiregames.com/forum/uploads/monthly_2016_07/elephant.png.d12017f872cf14f8b046706f497701ba.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="https://wildfiregames.com/forum/uploads/monthly_2016_07/elephant.png.d12017f872cf14f8b046706f497701ba.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="https://wildfiregames.com/forum/uploads/monthly_2016_07/elephant.png.d12017f872cf14f8b046706f497701ba.png" class="gallery_img">
</div>
</div>
</div>