This question already has answers here:
How can I make a div 100% of window height?
(5 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 18 days ago.
I am new on this forum and don't really know how to use it well,
I am also starting learning front end,
For my project i am trying to put an image in the center of the page (vertically and horizontally)
But I only managed to center it horizontally.
Here is my html code :
.fondCarte {
display: flex;
justify-content: center;
align-items: center;
}
.fond {
width: 400px;
aspect-ratio: 2 / 3;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}
<body>
<div class="fondCarte">
<img src="images/fond.jpg" alt="fond du cv" title="fond du cv" class="fond">
</div>
</body>
And the result : result
Can someone help me ?
Thanks
The element is centered in the body element but the body element is only the height of the content. To solve this you need to set the body to 100% of the viewport. We do this by setting the body height to 100vh.
Then, on the body element set the display type to display: grid so you can use the place-items property to center the image. You don't need the .fondCarte container in this case.
Useful reference info:
setting body height trick on medium.com
Centering things using flex and grid on w3doc.com
How to center utility on howtocenterincss.com
.fond {
width: 400px;
aspect-ratio: 2 / 3;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}
body {
height: 100vh;
display: grid;
place-items: center;
}
<body>
<img src="https://picsum.photos/id/237/200/300" alt="fond du cv" title="fond du cv" class="fond">
</body>
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 3 months ago.
I have the following CSS code, which is part of a much bigger CSS code used in the website I am working on:
.cards-u {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.card-u {
margin: 20px;
padding: 20px;
width: 160px;
height: 160px;
line-height: 120px;
justify-content: center;
align-items: center;
text-align: center;
align-self: center;
flex-direction: column;
border-radius: 10px;
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
transition: all 0.2s;
text-decoration: none;
}
.card-1-u {
background: radial-gradient(#1fe4f5, #3fbafe);
}
and in the HTML code I have:
<div class="cards-u">
<a href="https://example.com" class="card-u card-1-u" style="text-decoration: none;">
<h3>Text Sample 1</h3>
</a>
<a href="https://example.com" class="card-u card-1-u" style="text-decoration: none;">
<h3>Text Sample 2</h3>
</a>
</div>
but the texts Text Sample 1 and Text Sample 2 are not centered vertically and are at the top of the flexbox.
It seems something from my large CSS code is interfering, but I don't know what.
My question is assuming we don't know what is the rest of the CSS, can we force this part to do what we want, which is centering the text vertically inside the flex boxs?
This is happening becuase .cards-u doesn't have any height defined. Its taking the content's height as its own height and keeping the content within that area.
You should either give .cards-u full page height using 100vh or do like:
.cards-u{
position: relative;
}
.card-u{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Using margin:auto to vertically-align a div
(15 answers)
Why don't margin-top: auto and margin-bottom:auto work the same as their left and right counterparts?
(2 answers)
Closed 4 months ago.
Here is code:
.HUD {
height: 100%;
width: 100%;
overflow: hidden;
}
.Smart_HudWarp{
display: block;
height: fit-content;
margin-top: auto;
margin-bottom: auto;
}
<div class="HUD">
<div class="Smart_HudWarp">
some elements....
</div>
</div>
I'm trying to center div inside another one, the problem is - margins doesn't show up, what i'm missing?
Although it's hard to say without the rest of the content of your html and css, i suspect the reason the auto is not working is because 100% is not considered a "static" height or width for the parent div. Margin auto doesn't actually assign a value to the margins. Instead, it allows the browser to choose the values for the margin. Browsers assign the values margin-top: 0; margin-bottom: 0; and then horizontally center the object within the parent when the shorthand property margin:auto; is given. So when you specify margin-top: auto; margin-bottom: auto; all that's being assigned is margin-top: 0; margin-bottom: 0;
a simple solution would be to use flexbox. I personally don't like using position: relative/absolute because it can be quite finicky, but that's just me. Note that flexbox comes with its own quirks, too.
.parent {
background: navy;
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh; /* this makes the height a "static" value, while also covering a height equal to the whole height of the viewport */
width: 100%;
}
.child {
background: pink;
padding: 4vh;
}
<div class="parent">
<div class="child">
Hello World!
</div>
</div>
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
Good morning everyone.I want to try to tell you about my flexbox problem. I searched a lot on the internet (some days), maybe i maybe i was looking badly on the google ? but unfortunately I did not find the answer to my question. My problem is that when I want to apply persistence align-items: center; for flexbox, it doesn't work. I just want it to auto-center, both horizontally and vertically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <title>flex-box</title>
<link rel="stylesheet" href="css/flex.css">
</head>
<body>
<div class="header">
<div class="align-header">
<nav class="navigation">
<ul class="my-ul-links">
<li class="link">Home</li>
<li class="link">Forum</li>
<li class="link">Catalog</li>
</ul>
</nav>
</div>
</div>
<div class="wallpaper"></div>
</body>
</html>
I even went to the official documentation MDN but unfortunately, I didn’t find there how to use flexbox together with the tag nav and ul, nested in li + a. Very weird. Maybe I don't understand something.
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #eee;
}
.header {
background: white;
width: 100%;
height: 50px;
}
.align-header {
width: 800px;
height: 100%;
margin: 0px auto 0px auto;
}
.my-ul-links {
display: flex;
justify-content: center;
align-items: center; /* does not working */
}
.link {
padding: 0px 10px 0px 10px;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
I will be very grateful if you can help me with this problem. Thank for early.
Serj1c is right about the flex-direction.
If you want your align-items: center to work, please make sure that the li height and width are not 100%.
you can always use the new stuff, like
place-items: center || place-content: center.
. works like a charm
What are you trying to achieve? "align-items" does not center items horizontally and vertically. it simply aligns them acc.to cross-axis of your "flex-direction". for instance, if your "flex-direction: column" than "align-items: center" will align them horizontally. to center items along the main-axis of your flex-direction use "justify-content"
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 4 years ago.
I need to align container in the centre as well as in the middle of the body.
If I add margin-top it adds a white space above the container div and shifts the background image downwards too.
I would prefer everything in percentage.
body {
margin: 0px;
height: 100%;
background-image: url("../Images/LogIn/Background.jpg");
background-size: 100% 100%;
}
html {
height: 100%;
}
.Container {
margin: auto;
width: 60%;
height: 80%;
background-color: white;
border-radius: 20px;
}
<div class="Container">
</div>
Put the following styles on the bottom to align your child div in the center:
body {
display: flex;
justify-content: center;
align-items: center;
}
.container{
margin:auto;
width: 50%
}
Any container with a width and relative position when styled with margin auto will automatically center inside a relatively positioned parent div (like body) - if it has content.
<style>
.container{
margin:auto;
width: 50%;
background-color: grey;
}
</style>
<body>
<div class="container">
<p> text </p>
</div>
</body>
Also as a sidenote, you should avoid styling the body at all.
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 4 years ago.
I'm looking for a method to center a div in the body, a div without defined dimentions?
Any help would great.
By combining margin and translate:
First, create 50% of the page height space above the div with margin-top: 50%;. The div now starts at the middle of the page.
But thats too far and you dont know the height, how to correct that? By using translate.
Margin refers to the parent (in this case the body), translate refers to the size of the object (#example)
#example{
margin-top: 50%;
transform: translateY(-50%);
/* And now you figure out how to use the same trick on the X-axis */
}
Some demo values to help it make more obvious:
document height Element height -> 50% margin in px -50% translate in px
800px 250px -> 400px -125px
800px 150px -> 400px - 75px
1000px 150px -> 500px - 75px
Nice bonus of this method: It keeps working when when you add any value padding and also when you decide to set some fixed values later on.
There are few approaches to that problem.
Solution 1
position: absolute, transform: translate.
.parent {
position: relative;
height: 500px;
width: 500px;
background: green;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: red;
}
<div class="parent">
<div class="child">
Content
</div>
</div>
Solution 2
display: flex; align-items: center; justify-content: center; for parent.
.parent {
display: flex;
align-items: center;
justify-content: center;
height: 500px;
width: 500px;
background: green;
}
.child {
background: red;
}
<div class="parent">
<div class="child">
Content
</div>
</div>
Look into using Flexbox.
Flexbox allows for vertical alignment of elements, no matter what their size, using the align-items property on a parent element. justify-content allows for easy horizontal centering.
A good guide to all things flexbox is here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
See my example here: http://jsfiddle.net/srn4opqL/ or:
HTML:
<div class="flex-container">
<div class="greenbox">Some arbitrary content<br> that will set the dimensions of the div</div>
</div>
CSS:
.flex-container{
width: 100%;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.greenbox {
background: limegreen;
text-align: center;
padding: 2em;
}
Regarding vendor prefixes. I used the tool at: https://autoprefixer.github.io/ set to "last 3 versions."