I want to show an image in the center of a page with original size.
I tried the code below
.container
{
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container"><img src="1.png" alt="No Internet Connection" ></div>
</body>
</html>
.container
{
display: flex;
align-items: center;
justify-content: center;
height: 90vh;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container"><img src="1.png" alt="No Internet Connection" ></div>
</body>
</html>
You can use display: flex;. It's responsive and works great. After that I used justify-content: center; because of this it is horizontal in the center. And because of align-items: center; and height: 90vh; it is vertical centered
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 months ago.
`
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./slider.css">
<title>slider</title>
</head>
<body>
flex
<script src="./slider.js"></script>
</body>
</html>
`
body {
background-color: #927df1;
display: flex;
align-items: center;
justify-content: center;
}
i watch in youtube but it's not working align-items: center;
justify-content: center; working
align-items: center; not working
why? youtube it's working..... plz help
The problem could be that you have not specified a flex-direction, which is necessary for align-items and justify-content to work. Try adding this to the body CSS:
flex-direction: column;
The problem is that you do not have content to apply align-items to. align-items is supposed to work on vertical alignment. what you are looking for is horizontal alignment probably.
check the following fiddle to get an idea of what is happening.
body {
background-color: #927df1;
display: flex;
}
.box{
width:200px;
height:200px;
border: 1px solid blue;
display:flex;
align-items:center;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./slider.css">
<title>slider</title>
</head>
<body>
<div class="box">
flex
</div>
<div class="box">
flex
</div>
<div class="box">
flex
</div>
<script src="./slider.js"></script>
</body>
</html>
Edit: In case you want to use the align-items to center your content vertically, just define flex-direction property to column. Default value is row so it will align according to row height. setting it to column will align your content according to column's width.
Your code working properly just a minor mistake.
by default width and height is 100%; in this case we just simply define height as 100vh
body {
background-color: #927df1;
display: flex;
align-items: center;
justify-content: center;
height:100vh;
}
I`ve been struggling with some css code, specifycally with flex. First i had to figure it out how to stick footer at bottom but now i cant center my divs. Here is the html:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
</head>
<div class="page-container">
<div class="content-wrap">
<div class="optional-content-wrap">
<h1>Write, edit and run HTML, CSS and JavaScript code online.</h1>
<p>
Our HTML editor updates the webview automatically in real-time as
you write code.
</p>
</div>
</div>
<div>Footer</div>
</div>
</html>
</div>
and the css:
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.optional-content-wrap {
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
}
.content-wrap {
flex: 1 1;
}
You want the children of the flex to be centered. So I set .content-wrap display to flex, and aligned items within. also text-align center.
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content-wrap {
flex: 1 1;
}
.content-wrap {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-container">
<div class="content-wrap">
<div class="optional-content-wrap">
<h1>Write, edit and run HTML, CSS and JavaScript code online.</h1>
<p>
Our HTML editor updates the webview automatically in real-time as you write code.
</p>
</div>
</div>
<div>Footer</div>
</div>
</body>
</html>
Maybe you can help me, I want to center vertically as well as horizonally the buttons side by side.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Start Page</title>
<link rel="icon" type="image/ico" href="Logo.ico">
</head>
<style>
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
</style>
<body>
<div class="wrapper">
<input type="image" src="btn-system-konfiguration-orange.png">
<input style="padding: 1%" type="image" src="btn-digital-twin-orange.png">
<input type="image" src="btn-sensor-konfiguration-orange.png">
</div>
</body>
</html>
Do you have any ideas? The solution is probably very simple.
I believe if you use justify-content: space-around; can help with making them line up horizontally.
.wrapper {
display: flex;
align-items: center;
justify-content: space-around;
}
When you try to align it vertically you would need to use flex-direction: column; I am assuming youre doing this when the screen size is phone size so I would add it to a media query with max 400 or something along those lins
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
add
html,
body {
height: 100%;
}
the html and body need to have height defined in this case.
Working pen: https://codepen.io/vas131/pen/yLgydxN
I'm wondering if there's a better way to evenly space the three divs within a parent div (horizontally) using flex. Here's what I have:
.container {
display: flex;
}
.left-div, .middle-div, .right-div {
display: flex;
justify-content: center;
width: 33.3%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<div class="container">
<div class="left-div">
Left
</div>
<div class="middle-div">
Middle
</div>
<div class="right-div">
Right
</div>
</div>
</body>
</html>
As you can see, I set each child-div / column to width: 33.3% - is there a CSS property that will automatically force them to span 100% width of their parent, collectively, without using percentages?
If I get rid of width: 33%, I get this:
.container {
display: flex;
}
.left-div, .middle-div, .right-div {
display: flex;
justify-content: center;
/*width: 33.3%;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<div class="container">
<div class="left-div">
Left
</div>
<div class="middle-div">
Middle
</div>
<div class="right-div">
Right
</div>
</div>
</body>
</html>
I also tried setting the parent div to justify-content: space-between;, but this is now forcing the content of the inner divs to get aligned to the left (for the left div) or to the right (for the right div):
.container {
display: flex;
justify-content: space-between;
}
.left-div, .middle-div, .right-div {
display: flex;
justify-content: center;
/*width: 33.3%;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<div class="container">
<div class="left-div">
Left
</div>
<div class="middle-div">
Middle
</div>
<div class="right-div">
Right
</div>
</div>
</body>
</html>
I know that setting each child div to width: 33% works, but is there a better way? Without having to calculate percentages if I wanted 7 columns, for example?
You're almost there, just try with justify-content: space-around;
As a plus, I'd recommend you have a look at this guide for a lot of interesting flexbox explanations :)
.container {
display: flex;
justify-content: space-around;
}
.left-div, .middle-div, .right-div {
display: flex;
justify-content: center;
/*width: 33.3%;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<div class="container">
<div class="left-div">
Left
</div>
<div class="middle-div">
Middle
</div>
<div class="right-div">
Right
</div>
</div>
</body>
</html>
flex-grow might be what you need here .
The flex-grow CSS property sets the flex grow factor of a flex item main size. It specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).
.container {
display: flex;
}
.left-div, .middle-div, .right-div {
display: flex;
justify-content: center;
flex-grow:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<div class="container">
<div class="left-div">
Left
</div>
<div class="middle-div">
Middle
</div>
<div class="right-div">
Right
</div>
</div>
</body>
</html>
I'm trying to help a friend with this site. Specifically he wants the two images below the large image at the start of the page to align with the edge of the page, so that the edge of the right image aligns with the edge of the image above it.
I created the following mini demo. In it I have a flex container around the anchors with flex-basis set to 490px. However the images are not staying inside the anchor elements, nor the main column container with width: 1000px. We would like the images to be 490px wide, and the left image should align with the left edge and the right image should align with the right edge.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.kickers {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.kickers > a {
flex-basis: 490px;
}
</style>
<body style="display: flex; flex-direction: column; align-items: center;">
<div style="width: 1000px; height: 1000px; background-color: red;">
<div class="kickers">
<a href="https://www.machinevisiondirect.com/machine-vision-lights.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13601540"></a>
<a href="https://www.machinevisiondirect.com/swmo.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13657163"></a></div>
</div>
</body>
</html>
Thoughts?
You were close, you just need to add a max-width of 100% to the images to stop them overflowing the container.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.kickers {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.kickers > a {
flex-basis: 490px;
}
.kickers img {
max-width: 100%;
}
</style>
<body style="display: flex; flex-direction: column; align-items: center;">
<div style="width: 1000px; height: 1000px; background-color: red;">
<div class="kickers">
<a href="https://www.machinevisiondirect.com/machine-vision-lights.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13601540"></a>
<a href="https://www.machinevisiondirect.com/swmo.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13657163"></a></div>
</div>
</body>
</html>