This is my HTML code:
<div ></div>
<div >
<div >
<button style="background-color: azure; border: 2px solid black;" id="left"><i ></i></button>
</div>
<div id="first_div">
<h4><u>Newspaper particulars</u><i style="float: right; cursor: pointer;"></i></h4><br>
<ul>
<li><label for="date">Select date</label><br></li>
<input type="date" id="date" name="date" style="text-align: center; width: 100%;"><br><br>
<li><label for="unit">Select division</label><br></li>
<select name="unit" id="unit" style="width: 100%; text-align: center;">
<option value="default" id="default">Click to select</option>
<option value="HQ">HQ</option>
</select><br><br>
<li><label for="cat">Select news category</label><br></li>
<div id="cat" style="border: 2px solid white; padding: 5px;">
<input type="radio" id="newspaper" name="category" value="News paper">
<label for="newspaper">News paper</label><br>
<input type="radio" id="newsportal" name="category" value="News portal">
<label for="newsportal">News portal</label><br>
<input type="radio" id="socialmedia" name="category" value="Social media">
<label for="socialmedia">Social media</label>
</div>
</ul>
</div>
<div id="second_div">
<div >
<span id="preview_text" style="text-align: center; vertical-align: middle; color: red;">Image preview</span>
</div>
</div>
<div >
<button style="background-color: azure; border: 2px solid black;" id="right"><i ></i></button>
</div>
<div id="but">
<button type="button" >Upload</button>
</div>
</div>
And this is my CSS:
.bg-image {
/* The image used */
background-image: url("/background.jpg");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
.left.arrow{
/* margin-top: 30%; */
margin: auto 0;
z-index: 2;
width: fit-content;
padding: 10px;
height: fit-content;
}
.right.arrow{
/* margin-top: 30%; */
margin: auto 0;
z-index: 2;
width: fit-content;
padding: 10px;
height: fit-content;
}
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
z-index: 2;
height: 100%;
width: fit-content;
padding: 20px;
height: fit-content;
}
.para{
background-color: rgba(0, 0, 0, 0.329); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
z-index: 2;
width: 50%;
padding: 10px;
text-align: center;
}
.flex-container {
display: flex;
width: 70%;
margin: 0 auto;
position:fixed;
left: 20%;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
}
.container{
width:100%;
height:100%;
max-height: 100%;
}
#preview_text{
line-height: 500px;
}
#but{
display: flex;
margin: 0 auto;
position: absolute;
top:100%;
left: 35%;
}
My issue is that the flex div is never in the center of the screen no matter how much I modify the CSS. And sometimes when I try to view the html page in a mobile screen one of the divs inside the flex div becomes longer than the other. My requirement is that both the divs inside the flex div should be of equal heights on all times. And the whole flex div should be in the center of the screen.
The but div should be below the flex div and should be in the center respective to the flex div. The left arrow and right arrow divs should also be in the center (also respective to the flex div). This is a pictorial representation of what I want:
How do I proceed? Please help me.
CodePudding user response：
Starting with the but div I think is better to move it one level up and create a new container. So the div can be positioned without using absolute.
<div >
<div >
...
</div>
<div id="but">
...
</div>
</div>
.flex-container {
display: flex;
}
.outer-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
position: fixed;
top: 0;
}
As you are using a div for the background, You need to keep position: fixed here. Now to center the but you can use align-self because using align-items in the container will make the children to shrink later.
#but {
align-self: center;
}
To make all flex-container children same height lets remove all height properties since that is the default behavior of flex-box (when in row direction). And to make para and bg-text divs same width lets use flex: 1. This will make them grow to the same size as long as it has enough space.
.left.arrow {
margin: auto 0;
z-index: 2;
padding: 10px;
}
.right.arrow {
margin: auto 0;
z-index: 2;
padding: 10px;
}
.bg-text {
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
z-index: 2;
padding: 20px;
flex: 1;
}
.para {
background-color: rgba(0, 0, 0, 0.329);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
z-index: 2;
padding: 20px;
text-align: center;
flex: 1;
}
It looks like you want to center the preview_text. Lets use flex-box again.
.container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
#preview_text {
/* line-height: 500px; */
}
For now the flex-container is using full width. To limit it you can use a fixed margin or fixed width. Using percentage for this will create large margins on small screens unless you put different values for different screen sizes (using media queries or the calc and min/max functions). Let's use a fixed width and margin: auto to keep it centralized.
.flex-container {
display: flex;
max-width: 800px;
margin: 0 auto;
width: 100%;
}
Final result:
body {
height: 100vh;
margin: 0;
}
.bg-image {
/* The image used */
background-image: url("/background.jpg");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
.left.arrow {
margin: auto 0;
z-index: 2;
padding: 10px;
}
.right.arrow {
margin: auto 0;
z-index: 2;
padding: 10px;
}
.bg-text {
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
z-index: 2;
padding: 20px;
flex: 1
}
.para {
background-color: rgba(0, 0, 0, 0.329);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
z-index: 2;
padding: 20px;
text-align: center;
flex: 1
}
.flex-container {
display: flex;
max-width: 800px;
margin: 0 auto;
width: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
#preview_text {
/* line-height: 500px; */
}
#but {
align-self: center;
}
.outer-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
position: fixed;
top: 0;
}<!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>
</head>
<body>
<div ></div>
<div >
<div >
<div >
<button style="background-color: azure; border: 2px solid black;" id="left"><i
></i></button>
</div>
<div id="first_div">
<h4><u>Newspaper particulars</u><i style="float: right; cursor: pointer;"></i></h4><br>
<ul>
<li><label for="date">Select date</label><br></li>
<input type="date" id="date" name="date" style="text-align: center; width: 100%;"><br><br>
<li><label for="unit">Select division</label><br></li>
<select name="unit" id="unit" style="width: 100%; text-align: center;">
<option value="default" id="default">Click to select</option>
<option value="HQ">HQ</option>
</select><br><br>
<li><label for="cat">Select news category</label><br></li>
<div id="cat" style="border: 2px solid white; padding: 5px;">
<input type="radio" id="newspaper" name="category" value="News paper">
<label for="newspaper">News paper</label><br>
<input type="radio" id="newsportal" name="category" value="News portal">
<label for="newsportal">News portal</label><br>
<input type="radio" id="socialmedia" name="category" value="Social media">
<label for="socialmedia">Social media</label>
</div>
</ul>
</div>
<div id="second_div">
<div >
<span id="preview_text" style="color: red;">Image preview</span>
</div>
</div>
<div >
<button style="background-color: azure; border: 2px solid black;" id="right"><i
></i></button>
</div>
</div>
<div id="but">
<button type="button" >Upload</button>
</div>
</div>
</body>
</html>