I've encountered a problem while coding my website row by row. For specifying products I have made small slideshows for every one of them, but I have a hard time centering the images vertically due to some pictures are standing and some are laying down. I use "text-align: center" for horisontall centering, but since the pictures heights varies I've been trying to use js.
Here's how far I've come trying to code a script that calculates the top-padding depending on how high the image is:
function padding(nr) {
var heightPX = document.getElementsByClassName("IMG"+nr).clientHeight;
document.getElementById("frame"+nr).style.paddingTop = ((290-s)/2);
}
290 is the maximum height, so 290-s is what's left over, and then divided by 2 for the same space over and under.. You get the idea, this isn't working though.
Help pls
You can center an element vertically using a combination of display: flex; align-items: center; on the parent element. There are other techniques covered here https://www.w3.org/Style/Examples/007/center.en.html
img {
max-height: 50vh;
}
div {
height: 100vh;
background: #333;
display: flex;
justify-content: center;
align-items: center;
}
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
Related
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 7 months ago.
I am looking to load the images below one another without any gaps in between:
something like this:
But currently this is what is happening:
As seen, a space is getting added between images if the images are of not the same size.
I think since I'm using Flexbox this is causing this issue. below is my code:
Js:
const list = [{title: "abd",id: 123}, {title: "gferger",id: 7676}, {title: "htytyjtyujt",id: 65575}];
{list.map((obj) => {
<div class="image-container">
<img class="img-section"/>
<div class="image-title">{obj.title}</div>
</div>
});
css:
.img-section {
width: 200px;
height: 300px;
}
.image-container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
however I'm not sure if there is any other way to display all images next to each other and also ensure no white spaces are seen when there is an uneven image size.
Any ideas ???
May be your question is
CSS-only masonry layout
Would be really happy to see specially if there are more than 2 Columns of Images like Pinterest. But I don't think it's possible with CSS Flexbox only.
However, if you cannot find any pure CSS solution, checko masonry Javascript Library
CSS Grid Layout can be pure CSS Solution but it's still in very early stages
you are using space-evenly
consider using this:
first: change to this and see the result:
.image-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
}
then you can change justify-content to flex-start or center and see the result;
I think you need justify-content: flex-start;
let me know if it helps you.
Also, if you want to see more datils about this topic, check this two project on my GitHub:
Justify Content
Align Items
So here is what I am trying to achieve. I want to have an image centered in the middle of the page, and when a button is clicked, a second image, horizontally aligned with the 1st, will appear next to it (with even spacing between them).
Right now I have the code to get them aligned next to each other working fine.
HTML:
div class="quiz">
<div class="column">
<span id="img1label" class="word"></span>
<img id="img1" class="imgs"/>
</div>
<div class="column">
<span id="img2label" class="word"></span>
<img id="img2" alt="quiz image" class="imgs"/>
</div>
</div>
CSS:
.quiz {
display: flex;
flex-direction: row;
flex-grow: 1;
margin: auto;
}
.column{
display:flex;
justify-content:center;
flex-direction: column;
flex-grow: 1;
}
.imgs{
display:block;
width:50%;
}
.word{
display:block;
width: 100%;
text-align:center;
}
The JS at the moment isn't really much worth showing, right now I have it so that img2 is a pure white image, on button click it just swaps images.
The problems with this:
The initial image is not centered, its put all the way to the left.
The insertion of a new image isn't really an insertion, so nothing changes in layout to adjust the margins to center two new images.
I tried using the image grid tutorial here: https://www.w3schools.com/howto/howto_js_image_grid.asp
But I don't want to resize my actual images. I just want them to move further apart when the number of images being displayed changes. I am not using JQuery right now, and I'd prefer to not have to learn how to use a whole new package for what seems to be a simple problem that I'm struggling with. Any help is appreciated.
How I understand, you should add alignments in your .quiz class
.quiz {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
margin: auto;
}
then your items in this block will be aligned. And if you want to add space between images just add margin on them.
I am looking at the cdk-virtual-scroll and hoping I can use this in my existing application, where I have a view containing items, who's width varies depending on screen size (eg phone vs tablet etc)
Forking this example, I have a modified version here.
My modifications are on App/cdk-virtual-scroll-overview-example.css, where I have changed the css to contain the following..
.example-viewport {
height: 200px;
width: 90%;
border: 1px solid black;
display: flex;
flex-direction: row;
flex-wrap: wrap
}
.example-item {
height: 50px;
background: red;
margin:0.5px;
width: 33%
}
#media screen and (min-width: 360px) {
.example-item {
width: 45%
}
}
So my aim here is have the items showing either 2 or 3 a row depending on the screen size. However, as can be seen, they do not seems to wrap at all...
I have used flex here (have I done this wrong?), but any css to get it working will do (perhaps flex grid, or other)
Is this possible using the cdk-virtual-scroll?
Thanks in advance
You could workaround it by chunking your items according to the number you want per row and then within the virtual scroll add ngFor to iterate each chunk. Then you can display flex on chunk div.
I have a bunch of blocks of tables shown in picture.
The block has the following css
.block {
float: left;
width: 50%;
}
And they are all wrapped within a wrapper
<div class="wrapper">
<div ng-show="condition1" class="block"></div>
<div ng-show="condition2" class="block"></div>
<div ng-show="condition3" class="block"></div>
</div>
Each block's height is dynamic depending on the content.
Each block can show or not show depending on condition. As you can see, it is possible that the second block won't show, and the third block will be pushed up to align with the first block.
There will always be at most 2 blocks per "row"
There will be alot more of these blocks in the future.
Now, what i want to achieve is for each row, set the the block with the smaller height to be the same height as the block with greater height. I am not sure how to approach this using CSS. If it is not possible, what would be the best way to approach this using jquery?
I spent countless hours and could not figure out (at least using CSS). All of the statements above are requirements and cannot be changed. Any expert help would be appreciated.
You may want to look at flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox can be used to stretch child elements based on the parent's size.
Here's a quick test I did in jsfiddle
https://jsfiddle.net/7Lknyxqr/
.wrapper{
display: flex;
align-items: stretch;
flex-wrap: wrap;
height: auto;
width: 100%;
}
.block{
width: calc(50% - 20px);
background-color: #343;
margin: 10px;
}
I'd like to have an element centered inside a viewport as long as it is smaller than the viewport and scrollable + aligned right as long as it is bigger than the viewport. Like this:
First I tried without Javascript, but float and overflow are knocking each other out. Then I tried putting a div with float:right next to the element and setting it's width programatically through Javascript. But the element wouldn't stick to the right when it's smaller than the viewport.
I'm out of ideas now, any suggestions would be very welcome.
I have a solution, which works if it's possible for you to replace the regular spaces inside the text with non-breaking-space entities :
http://codepen.io/anon/pen/vKgydN
Here is the essential part of the settings:
.x1 { /* wrapper for text container */
display: flex;
flex-direction: row-reverse;
overflow: hidden;
}
.x2 { /* text container */
flex: 0 0 auto;
display: inline-block;
align-items: flex-start;
margin: 0 auto;
}
So it's a reverse flex container with only one flex item which is not allowed to grow or shrink, has margin: 0 auto for centering and align-items: flex-start for right alignment when it's becoming narrower than the parent element/viewport.
EDIT/additional remark: I forgot about the scrolling ability, and right now I can't find a solution for it. Nevertheless, I leave this "half answer" here - maybe someone else comes up with the rest....
Meanwhile I have achieved the desired behaviour by utilizing JQuery. It's not perfect and I still wish there would be a solution without Javascript.
Here's what I've done to make it work.
HTML:
<div class="breadcrumb-scroller-container">
<div class="breadcrumb-scroller">
scroller content
</div>
</div>
CSS:
.breadcrumb-scroller-container {
text-align: center;
}
.breadcrumb-scroller {
overflow: auto;
white-space: nowrap;
}
Javascript (JQuery):
$(document).ready(function() {
// scroll left to a maximum of 10000px just to be sure
$(".breadcrumb-scroller").scrollLeft(10000);
});
If you have timing issues with $(document).ready() firing too early and before the scroller has been initialized by the browser, give it a short delay:
$(document).ready(function() {
setTimeout(function() {
$(".breadcrumb-scroller").scrollLeft(10000);
}, 500);
});