I have code to center my images (and eventually videos) like I want inside a div, but I am trying to get the images to stack vertically in a column.
It works if the space is confined enough, but I want it to work all the time. What can I do? Here is my codepen:
div{
margin: 0 auto;
height: 100vh;
text-align: center;
overflow: hidden;
max-width: 172vh;
}
img{
height: 50%;
}
https://codepen.io/thejaredmosley/pen/OJPVqBa
try below:
div {
....
display: flex;
flex-direction: column;
}
You can simply do it with the display:block CSS property.
https://www.w3schools.com/cssref/pr_class_display.asp
Give this CSS to your image and your image will get full-width space and will come in a stack.
So for Image, add this property:
img{
display:block;
}
Related
newbie here starting with the basics of HTML and CSS. I really have a hard time centering a simple div (a square in my example). I've watched many tutorials as well as read many articles but still cannot really figure out the "best" way to do it. With so many different ways like align-items, align-content, justify-items, justify-content, I get overwhelmed at some point especially with how these behave with different displays (flex, grid, inline-block etc), not to mention the positions of parents and childs. Below is an example that I still can't quite easily manipulate/center. The HTML is only the boilerplate and a blank div with class square inside the body. Thank you all in advance for your tips!
html {
height: 100%;
}
body {
min-height: 100%;
background-color: #162944;
}
.square {
height: 10rem;
width: 10rem;
background-color: salmon;
display: flex;
align-items:center;
justify-items: center;
align-content: center;
justify-content:center;
place-content: center;
place-items: center;
}
The above example has been tried with all possible combinations and NOT only as you see it. Also with display:grid; and others. Is there really not a simple way to center an object on your page?
One way to center a div is to set the width of the element and then use the margin property to set the left and right margins to auto. This will horizontally center the element within its container.
For example:
.element {
width: 400px;
margin-left: auto;
margin-right: auto;
}
You can also by using the text-align property.
.shape {
text-align: center;
}
Also by using the margin property.
For example:
.shape {
margin: 0 auto;
}
Finally, you can center a div when it comes to shapes by using the transform property.
For example:
.shape {
transform: translate(50%, 50%);
}
Centering a div can be easy or hard based on your layout options and what you want to achieve.
The simplest way to horizontally center a div, add a width and margin: 0 auto.
Simplest way to horizontally and vertically center a div is using a flexbox, display: flex; justify-content:center; align-items:center. Also you can go with display:table and display:table-cell.
Last option is to use Positioning. You can take a div, style it with position:relative and add a height:300px,width:300px. Then inside the parent div, add a child div and style it with position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:50px; width:50px
Here is a screen shot of the type of gallery I am trying to achieve. It's important that the images maintain their different heights and widths, but that they are displays in same size cells.
And here is my code:
html:
<ul>
<li><img/></li>
<li><img/></li>
<li><img/></li>
<li><img/></li>
</ul>
css:
ul {display: flex; flex-wrap: wrap;}
li {width: 25%;}
img { object-fit: contain; width: auto; height: auto;}
My images are just taking the full width of their cells, and I'm not sure how to have them take their own dimensions but stay within the cell. I have tried setting a fixed height on the cell but that didn't change anything. Any suggestions?
I think removing the width of the li does the trick.
Check out this example I made: https://codepen.io/szhabolcs/pen/dypeJMy?editors=1100
I don't think it's a good idea to do that using 'list'.
I suggest you to put all the imgs inside the same 'div' and put a css class that goes like this:
.class {
display: flex;
justify-content: center;
}
That way the images will stay on next to the other respecting the size of the image AND the width of the 'div'. You can choose inside the class the width of the div as well.
If you want to let different size of images contain in a same size container list, try to give list a flex style.
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li {
display: flex;
justify-content: center;
width: 25%;
height: 300px;
list-style: none;
}
img {
object-fit: contain;
overflow: hidden;
}
codepen
I have created a news section in the website. Each row contains 4 news cards. Somehow it is not behaving as it should. So can you help me to solve this issue.
Website Link: http://www.shmgroup.com/news.php
I am not able to share the code. Please inspect it.
The problem is with the varying height of the image and the text content. I have updated the site with the below CSS changes.
* Added fixed height to the image instead of width and aligned it in the center.
* Added 3 line clipping to the text description and added a min height.
.news-thumbnail img {
max-width: 100%;
height: 200px;
display: inline;
}
.news-thumbnail {
margin: 10px;
text-align: center;
}
.news-excert p {
font-size: 14px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 60px;
}
Remove div with class clearfix and add fix height to element
.news-post-container {
min-height: 500px; // example
}
This issue arise because your news cards are not in a same height. You can add min-height for news-post-container class.
.news-post-container {
min-height: 450px;
}
Remove clearfix classes.
Hope now news page will work properly.
remove clearfix classes
No matter what I try, I cannot manage to find the proper CSS for the behaviour below:
A: Larger-than-window images show the upper left of the image and allow scrolling to see the rest of it.
(Important: the parent's DIV background is covered, but should be visible on images with transparency — even if you scroll.)
B: Smaller-than-window images are horizontally and vertically centered, the parent DIV covers the whole window.
Thanks for any help!
In order to center the smaller image inside the parent div, you can use display:flex for the parent div. Then set the justify-content and align-items to center. Here is a workaround,
#mydiv {
overflow: auto;
max-width: 500px;
max-height:500px;
}
.mainContainer{
width:500px;
height:500px;
background-color:#000;
display: flex;
justify-content: center;
align-items: center;
background-size:cover;
}
Replace the small image with this to check how it works with a large image.
<div class="mainContainer">
<div id='mydiv'>
<img src='https://i1.wp.com/www.rceshop.com/wp-content/uploads/2016/12/samples.png?fit=480%2C400' />
</div>
</div>
PS: Change the width and height of the parent div to the required screen size of yours. Hope this will help!
The line-height property turned out to be the base for solving the problem. Not sure if this is a hack, but it works.
.mainContainer {
text-align: center;
}
#mydiv {
line-height: 100vH;
margin: 0;
}
img {
vertical-align: middle;
}
If I'm going to center an element in the middle of the screen with flexbox, is the following approach the most elegant?
HTML
<div class='btn'></div>
CSS
body{
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
display: flex;
}
.btn{
width: 10rem;
height: 10rem;
background-color: #033649;
margin: auto;
}
It seems that I have to use position: absolute and height+weight 100% to achieve this.
You have to use position: absolute because the default for an element is position: relative, and in this case, there is nothing to be relative to because you have made the flex container the body.
Your code will work fine, but there is a command to center objects in the actual flex model itself like so:
body{
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center; /*centers items on the line (the x-axis by default)*/
align-items: center; /*centers items on the cross-axis (y by default)*/
}
If you do this you can remove the margin: auto from your .btn class to perhaps give some more wiggle room in your code.
Here is a good resource for all things flexbox.
You can position an element inside a container by using place-items without the need to add any CSS property to that element. In this case I'm using the body of document as the container.
Snippet
body{
margin:0;
height:100vh; /* use 100% of the height of the viewport */
display:grid;
place-items: center;
}
<body>
<button>I'm a lonely button :B</button>
</body>
About place-items
The CSS place-items shorthand property allows you to align items along
both the block and inline directions at once (i.e. the align-items and
justify-items properties) in a relevant layout system such as Grid or
Flexbox. If the second value is not set, the first value is also used
for it.
Find more info here