When the website is at a phone screen, the flex-items spread apart the whole height of the screen even when align-items: center. I want the flex items to be anchored in the center and not move when height is changed.
I tried to set gap: 0 but there was still a gap in between.
body,html{
height: 100vh;
padding: 0
}
#div1{
width: 200px;
height: 200px;
background-color: tomato;
}
#div2{
width: 200px;
height: 200px;
background-color: aqua
}
#wrapper{
display: flex;
gap: 20px;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 100%
}
<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="wrapper">
<div id="div1"></div>
<div id="div2"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 6 months ago.
I used Flexbox on my div but it still only centers horizontally and not vertically. I want it in the middle of the screen. Here is my code -:
<!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>Test</title>
<style>
.box{
background-color: red;
border: 2px solid black;
width: 100px;
height: 100px;
}
.container{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box1</div>
</div>
</body>
</html>
Here is my output -:
Any help would be great.
Thank You.
set the height and width of the container to 100vh and 100vw
add height in your parent .container class it will take full height
.container{
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
.box{
width: 50px;
height: 50px;
background-color: red;
/* Center vertically and horizontally */
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; /* Apply negative top and left margins to truly center the element */
}
.container{
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="box">Box1</div>
</div>
I'm designing a dashboard using Chart.js graphs and Canvases. Please see the dashboard below:
The design is exactly what I want until I resize the page to make it smaller and then resize it again to make it bigger. When I do this I end up with the following:
This did not occur until I added the second chart and made the div element containing them both a flexbox. Before making the div a flexbox I had the following layout:
This can easily be resized into the following form for a smaller window:
and then resized again into the larger form from the previous image. What change has flexbox made that stops the automatic resizing of the charts?
My code is below. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css_styles/main.css">
<title>Plus UI Design</title>
</head>
<body>
<div class="overview_container">
<div id="plusPointsContainer" class="points_container-main">
<div id="plusPointsDoughnut" class="doughnut_holder">
<canvas id="plusPoints" height="400" width="400"></canvas>
</div>
<div class="points_display-horizontal">
<div class="points_display-vertical">
<div>
<div class="points_header">Today:</div>
50
</div>
<div class="points_display-yesterday">
<div class="points_header-smaller">Yesterday:</div>
60
</div>
</div>
</div>
</div>
<div class="bar_chart_container">
<canvas id="overviewBarGraph" height="400" width="600"></canvas>
</div>
</div>
</body>
</html>
CSS:
.overview_container {
display: flex;
}
.bar_chart_container {
max-width: 600px;
max-height: 400px;
}
.points_container-main {
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
max-width: 400px;
min-width: 250px;
max-height: 400px;
min-height: 250px;
margin-right: 5vw;
}
.points_display-horizontal {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
}
.points_display-vertical {
position:relative;
top: 8%;
font-family: Helvetica Neue;
font-size: 70px;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.points_display-yesterday {
font-size: 30px;
text-align: center;
margin-top: -10px;
color: rgba(0, 0, 0, 0.4);
}
.points_header {
font-size: 10px;
margin-bottom: -10px;
}
.points_header-smaller {
font-size: 10px;
margin-bottom: -3px;
}
I have only included the html and css parts as I don't think Javascript is the issue here, but I can update the code section if anyone thinks it is the issue.
Try to remove from .points_container-main and .bar-chart-container max-width, min-width styles. Add them styles in flex world:
.points_container-main{
flex: 0 0 auto;
width: 25%;
}
.bar-chart-container{
flex: 0 0 auto;
width: 75%;
}
I have the following html/css code. What I would like to do is to make .inner element's height be adaptable to the content only if it exceeds the default minimum height I have set in the code. The below code doesn't allow .box elements to stretch beyond the initial height of .inner, which I don't want to do. I suspect it has to do with flex. If I remove display:flex; from .inner, the boxes stretch beyond the initial height of .inner, but .inner doesn't stretch to accommodate the content. I want .inner to stretch in this case, while using display:flex; or display:grid; for .inner, otherwise, to behave as I set in my code. How can achieve this?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
width: 100%;
height: 70px;
background-color: steelblue;
}
.container {
width: 100%;
height: calc(100vh - 70px);
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 95%;
height: 100%;
background: steelblue;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.box {
width: 200px;
height: 400px;
background-color: burlywood;
margin: 10px;
}
<!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" />
<link href="style.css" rel="stylesheet" />
<title>Static Template</title>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="inner">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
The is the codesandbox
If you want to set the default minimum height, change height to min-height for .container.
Currently, .container's height property is defined. Therefore, the height does not scale.
HTML markup:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
display:flex;
justify-content: center;
align-items: center;
}
.container {
background-color: green;
border:1px solid black;
width:80vw;
height:80vh;
}
In the above code I am trying to align my div content to display in the center but it is not displaying what changes should I make to do so.
You forgot to add height for the body.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
This will solve your issue.
If you want to use the same flex command you must add a height property.
For example:
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
I'm very new to coding, and I'm having some trouble fitting an image to about 80% screen width.
The image is not moving despite me changing the width: 80% to other percentages. it is also going off the edge of the screen regardless of me putting overflow: 0px; and flex-wrap: wrap;
I've managed to figure this out before, but this code doesn't seem to be responding for some reason and I'm not sure what I'm doing wrong, so any help is appreciated!
here's my code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
<style>
#title {
width: 80%;
height: auto;
overflow: 0px;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
</style>
</head>
<body style="background-color:black">
<img id="title" src="http://www.vibrantandalive.com/pictures/title.png"/>
</body>
</html>
You have the opening css tag twice, this shoud work.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#title {
width: 80%;
height: auto;
overflow: 0px;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
</style>
</head>
<body style="background-color:black">
<img id="title" src="http://www.vibrantandalive.com/pictures/title.png">
</body>
I don't think you need all these css elements:
* {
margin: 0;
padding: 0;
border: 0;
}
#title {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background-color:black">
<img id="title" src="http://placekitten.com/301/301" />
</body>
</html>