Can someone explain to me why when I set min-height of my section to calc(100vh), it results in a large window size and small text on iOS 10 (iPhone SE)?
section {
display: flex;
display: -webkit-flex;
display: -webkit-box;
align-items: center;
-webkit-align-items: center;
-webkit-box-align: center;
min-height: calc(100vh);
text-align: center;
}
section div {
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<section>
<div>
<h1>Title</h1>
<h2>Description</h2>
</div>
</section>
</body>
</html>
have you make default body styling. body{margin:0; padding:0} if not please try this. It may solve your issue if you are using above html,css.
Related
I am experimenting with flex-box but I seem to be failing to create nested flexboxes. As in the code below, while the container children behaves normally, the paragraphs in the text div do not perform as expected.
I am trying to create a row of divs (div 1 2 3) aligned horizontally spaced evenly, while the contents in the middle div (the two paragraphs) should be spaced vertically evenly.
<!DOCTYPE html>
<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">
<title>Document</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<div>Div 1</div>
<div class="text">
<p>abc</p>
<p>def</p>
</div>
<div>Div 3</div>
</div>
</body>
</html>
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
}
.text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
weight: 100%
}
As Paulie said you have to add a height to your text class. In addition to that make the default margin and padding of the body 0 so that you can see the evenly spaced div(s). Here is the code for the css
*{
padding: 0;
margin: 0;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
}
.text {
height: 80px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 months ago.
I'm trying to position the green box in the center of the page but totally unsuccessfully.
I set the body as flex..this should allow me to align the inside container to the center but it doesn't work. Why?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
<link rel="stylesheet" href="signup.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://kit.fontawesome.com/5ab317586b.js" crossorigin="anonymous"></script>
</head>
<body class="body">
<div class="container">
<div class="box-1">
<h2>Box1</h2>
<p>This is the box 1</p>
</div>
<div class="box-2">
<h2>Box2</h2>
<p>This is the box 2</p>
</div>
<div class="box-3">
<h2>Box3</h2>
<p>This is the box 3</p>
</div>
</div>
<script src="js/bootstrap.bundle.js"></script>
</body>
</html>
CSS
.body{
background-color: black;
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
}
.container div {
border: solid red;
padding: 0;
}
.container{
background-color: green;
display: flex;
justify-content: space-around;
}
I want the green box in the middle, what I'm doing wrong?
thanks
you need to assign height in vh and add justify-content: center; to your body css. the following body css will align it to center
.body{
background-color: black;
display: flex;
width: 100%;
height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
As Anis has mentioned the body need to be assigned a height so there will be space for the centering to work.
This version uses min-height so the page will be able to scale as more content being added later.
body{
background-color: black;
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
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 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