I want to create a page which is split by a box above a horizontal line and one below the horizontal line. Just above and below the line I want to have a text. I came up with a solution with flex and 4 divs where I adjust the height of each div to around 30%-20%-20%-30%. However when going responsive this sometimes keeps the text crossing the horizontal line. I want to guarantee that the above text stays above and the below text stays below.
Here my solution is - https://codepen.io/tobwun/pen/VwWRGWY
body,
html {
height: 100%;
width: 100%;
}
.m {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
text-align: center;
color: white;
font-weight: bold;
font-size: 2em;
}
.d1 {
background-color: pink;
width: 100%;
height: 30%;
}
.d2 {
background-color: pink;
width: 100%;
height: 20%;
}
.d3 {
background-color: lightblue;
width: 100%;
height: 20%;
}
.d4 {
background-color: lightblue;
width: 100%;
height: 30%;
}
<body>
<div class="m">
<div class="d1">
</div>
<div class="d2">
ABOVE TEXT
</div>
<div class="d3">
</div>
<div class="d4">
BELOW TEXT
</div>
</div>
</body>
I was wondering if it would be possible with two divs and some padding? With the first one the text on the bottom and the second one the text on top.. If this by design is not recommended to be done with flexbox I am also open for another solution.
Thanks for any help!
Why not just use two elements, and use align-items and justify-content to place them as you want ?
body,
html {
height: 100%;
width: 100%;
}
.m {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
color: white;
font-weight: bold;
font-size: 2em;
text-align:center;
}
.top, .bottom{
width: 100%;
height: 50%;
display:flex;
justify-content:center;
}
.top {
background-color: pink;
align-items:flex-end;
padding-bottom:0.5em;
}
.bottom {
background-color: lightblue;
align-items:flex-start;
padding-top:0.5em;
}
<body>
<div class="m">
<div class="top">
ABOVE TEXT
</div>
<div class="bottom">
BELOW TEXT
</div>
</div>
</body>
Easiest way to solve this is to use position: absolute;.
top: 50%; will put the element below the vertical center line.
bottom: 50%; will put the element above the vertical center line.
body {
margin: 0;
min-height: 100vh;
}
.top-text {
position: absolute;
bottom: 50%;
}
.bottom-text {
position: absolute;
top: 50%;
}
.top-text,
.bottom-text {
left: 0;
right: 0;
}
/* for styling purpose only */
body {
background: linear-gradient(darkblue 0% 50%, darkred 50% 100%);
color: white
}
.top-text,
.bottom-text {
text-align: center;
font-size: 2em;
border: 1px solid white;
padding: 5px;
}
<div class="top-text">Top</div>
<div class="bottom-text">Bottom</div>
Related
I have 2 parent containers in my code below. The first one is just for reference for what I want my second container to look like. The difference between the two is the first one I used absolute positioning and flex display but the second one is grid display. What I'm stuck on is understanding how to center class .item1 and position class .item2 all the way to the right just how it's like on the first parent container i.e class .topAdCon. My specific questions are 1) how to center .item1
2) how to set .item2's position all the way to the right (right: 0%)
3) on the first parent container I just set top: 0% to align it all the way to the top because it has absolute positioning how can I set the positioning of the second parent container where ever I want currently I'm using margin-top for top positioning is that the way to go or what is the right way?
4) Lastly how do I set the height for the second container because height isn't responding as it does on the first container?
Note: I commented out things I tried in order to achieve these things but they aren't working.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.topAdCon {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0%;
width: 100%;
height: 18%;
background-color: pink;
}
.topAdCon .adCon {
width: 40%;
height: 100%;
}
.topAdCon .adCon img {
width: 100%;
height: 100%;
}
.topAdCon .sideInfo {
display: flex;
text-align: center;
width: 17%;
height: 100%;
position: absolute;
right: 0%;
border: 1.5px solid #000000;
}
.topAdCon .sideInfo p {
font-size: 0.9vw;
margin: auto;
}
.wrapper {
display: grid;
align-items: center;
justify-content: center;
/*position: relative;
top: 20%;*/
margin-top: 20%;
grid-template-columns: 40% 17%;
width: 100%;
height: 18%;
/*height not responding*/
background-color: gold;
}
.item1 {
/*align-self: center;*/
width: 100%;
height: 100%;
}
.item1 img {
width: 100%;
height: 100%;
}
.item2 {
display: flex;
text-align: center;
/*align-self: flex-end*/
width: 100%;
height: 100%;
border: 1.5px solid #000000;
}
.item2 p {
font-size: 1.5vw;
margin: auto;
}
<div class="topAdCon">
<div class="adCon">
<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
</div>
<div class="sideInfo">
<p>this is test statement 1</p>
</div>
</div>
<div class="wrapper">
<div class="item1">
<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
</div>
<div class="item2">
<p>this is test statement 2</p>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.topAdCon {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0%;
width: 100%;
height: 18%;
background-color: pink;
}
.topAdCon .adCon {
width: 40%;
height: 100%;
}
.topAdCon .adCon img {
width: 100%;
height: 100%;
}
.topAdCon .sideInfo {
display: flex;
text-align: center;
width: 17%;
height: 100%;
position: absolute;
right: 0%;
border: 1.5px solid #000000;
}
.topAdCon .sideInfo p {
font-size: 0.9vw;
margin: auto;
}
.wrapper {
display: grid;
margin-top: 20%;
grid-template-columns: 30% 40% 12% 18%;
grid-template-areas: 'item item1 item2 item3';
width: 100%;
height: 18vh;
background-color: gold;
}
.item1 {
width: 100%;
height: inherit;
}
.item1 img {
width: 100%;
height: 100%;
}
.item3 {
display: flex;
text-align: center;
justify-content: end;
width: 100%;
height: inherit;
border: 1.5px solid #000000;
}
.item3 p {
font-size: 1.5vw;
margin: auto;
}
<div class="topAdCon">
<div class="adCon">
<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
</div>
<div class="sideInfo">
<p>this is test statement 1</p>
</div>
</div>
<div class="wrapper">
<div class="item"></div>
<div class="item1">
<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
</div>
<div class="item2"></div>
<div class="item3">
<p>this is test statement 2</p>
</div>
</div>
suppose we have 4 dives.
the first div is outer div.
i want to create a HTML that
the second div size be 50% first and be in middle bottom of first div.
the third div size be 50% second and be in middle left of second div.
the fourth div size be 50% third div and be in middle top of third div.
how can i do it?
Is this your desired output? It’s made using position, top and bottom, and translate to make sure it’s centered right.
.div1 div { /* makes every small div 50% the size of the previous */
width: 50%;
height: 50%;
}
.div1 {
width: 200px;
height: 200px;
background-color: red;
}
.div2 {
background-color: green;
position: relative;
top: 100%;
left: 50%;
transform: translate(-50%, -100%);
}
.div3 {
background-color: pink;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
.div4 {
background-color: lightblue;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
</div>
</div>
</div>
</div>
you can also use flex(or grid) and margin instead position :
div {
display: flex;
}
body>div {
/* sizing : whatever you want to start from */
height: 90vmin;
width: 90vmin;
background: #ed1c24;
}
div div {
height: 50%;
width: 50%;
}
div div {
background: #22b14c;
margin: auto auto 0;
}
div div div {
background: #ffaec9;
margin: auto auto auto 0;
}
div div div div {
background: #00a2e8;
margin: 0 auto auto;
}
/* center the demo */
html {
display: flex;
height: 100vh;
}
body {
margin: auto;
}
<div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>
We can achieve this by using the CSS Flexbox and Margin properties.
index.html
<body>
<div class="firstdiv">
<div class="seconddiv">
<div class="thirddiv">
<div class="fourthdiv">
</div>
</div>
</div>
</div>
</body>
styles.css
div {
display: flex;
}
.firstdiv {
background-color: red;
width: 600px;
height: 600px;
}
.seconddiv {
background-color: green;
width: 50%;
height: 50%;
margin: auto;
margin-bottom: 0;
}
.thirddiv {
background-color: pink;
width: 50%;
height: 50%;
margin: auto;
margin-left: 0;
}
.fourthdiv {
background-color: blue;
width: 50%;
height: 50%;
margin: auto;
margin-top: 0;
}
You can use CSS flexbox below. There are four divs below and you can change the size of the first div. And then the others automatically align and resize themselves.
HTML file:
<html>
<body>
<div id="first">
<div id="second">
<div id="third">
<div id="fourth">
<p>Text</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS file:
* {
margin: 0;
padding: 0;
}
#first {
background: #ed1c24;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: flex-end;
margin: auto;
}
#second {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background: #22b14c;
width: 50%;
height: 50%;
margin: 0 auto;
}
#third {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
background: #ffaec9;
width: 50%;
height: 50%;
}
#fourth {
display: flex;
justify-content: center;
align-items: center;
background: #00a3e9;
width: 50%;
height: 50%;
}
Click to see the result of these lines of code:
Result
As you can see in the snippet below, I have a .square-container which is positioned absolutely and it contains a square. I'm trying to vertically position the .square-container in the center of the parent div.
.container {
position: relative;
background-color: blue;
}
.square-container {
position: absolute;
top: 0;
right: 0;
height: 30px;
width: 30px;
}
.square {
width: 100%;
height: 100%;
background-color: red;
}
.hello {
padding: 15px;
}
<div class='container'>
<p class='hello'>Hello</p>
<div class="square-container">
<div class='square'></div>
</div>
</div>
For positioning absolute elements in the middle use top: 50%
And then use transform: translateY(-50%); and its centered
.container {
position: relative;
background-color: blue;
}
.square-container {
position: absolute;
right: 10px;
top: 50%;
height: 30px;
width: 30px;
transform: translateY(-50%);
}
.square {
width: 100%;
height: 100%;
background-color: red;
}
.hello {
padding: 15px;
}
<div class='container'>
<p class='hello'>Hello</p>
<div class="square-container">
<div class='square'></div>
</div>
</div>
.container{
display:flex;
align-items:center;
}
You wouldn't need absolute positioning here. If you set the container as a flex wrapper, you won't also need to position it relatively and can get rid of the square-container div as well that currently wraps the div.square element.
To push the square to the right, we could
A) use auto-margins inside the flex layout. So all that our div.square needs, is margin-left: auto, which tells the browser to push it as far as possible from its left siblings.
B) Use justify-content: space-between on our container. This tells the flex container to space out the elements to the sides.
The approaches differ very slightly and don't really matter in this example until we start adding more elements.
An updated example:
A
.container {
display: flex;
align-items: center;
background-color: skyblue;
padding: 15px;
}
.square {
height: 30px;
width: 30px;
margin-left: auto;
background-color: tomato;
}
<div class='container'>
<p class='hello'>Hello</p>
<div class='square'></div>
</div>
B
.container {
display: flex;
align-items: center;
justify-content: space-between;
background-color: skyblue;
padding: 15px;
}
.square {
height: 30px;
width: 30px;
background-color: tomato;
}
<div class='container'>
<p class='hello'>Hello</p>
<div class='square'></div>
</div>
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 6 years ago.
I want the content to be centered vertically and horizontally but it gets centered only horizontally. The problem is that I don't have fixed height.
Thank you guys for help!
html,
body {
height: 100% margin: 0;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
text-align: center;
}
<div class="content">
<h1>Welcome to the website!</h1>
</div>
You can easily center an element respect to the parent in this way (assuming that the parent has position: relative;).
In your example:
h1 {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You can also center it in the middle of the screen using position: fixed; instead.
Follow this code
HTML
<body >
<div class="content">
<h1>Welcome to the website!</h1>
</div>
</body>
CSS
html,body {
height : 100%;
width : 100%;
}
.content {
height : 100%;
width : 100%;
display: table;
}
h1 {
text-align: center;
display: table-cell;
vertical-align: middle;
}
Follow this code.
body{
margin: 0;
padding: 0;
}
.content-wrapper{
background-color: #121212;
display: block;
left: 0;
height: 100%;
padding: 15px;
position: fixed;
top: 0;
width: 100%;
}
.content{
background-color: #f5f5f5;
display: table;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
.centent-cell{
display: table-cell;
height: 100%;
vertical-align: middle;
width: 100%;
}
h1{
color: #121212;
}
<div class="content-wrapper">
<div class="content">
<div class="centent-cell">
<h1>Welcome to the website!</h1>
</div>
</div>
</div>
Here's an example of what you need:
<section>
<div class="centerize">
<div class="v-center">
<div class="box">Say my name!</div>
</div>
</div>
</section>
and CSS
section {
height: 100vh;
background: #fff;
}
.centerize {
display: table;
height: 100%;
width: 100%;
}
.v-center {
display: table-cell;
vertical-align: middle
}
.box {
background: #000;
width: 10%;
margin: 0 auto;
}
Currently I have this layout.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
min-height: 100%;
}
#wrapper {
height: 100%;
min-height: 100%;
position: relative;
background-color: red;
}
header {
height: 100%;
min-height: 100vh;
position: relative;
background-color: green;
text-align: center;
}
#header-top {
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
outline: 1px dotted red;
background-color: blue;
}
#header-middle {
position: relative;
top: 50%;
transform: translateY(-50%);
background-color: yellow;
outline: 1px dotted red;
}
#header-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color: grey;
outline: 1px dotted red;
}
<div id="wrapper">
<header>
<div id="header-top">
<p>I am fixed at the top</p>
</div>
<div id="header-middle">
<p>I am vertically centered</p>
</div>
<div id="header-bottom">
<p>I am stuck at the bottom but not fixed</p>
</div>
</header>
</div>
How do I use flexbox here to get the same layout.
The html, body and #wrapper needs to expand visually to surround all the child elements.
The header is to fill the entire viewport.
The #header-top is fixed at the top containing a logo floated to left and navigation floated to right with no explicit height.
The #header-middle is to be vertically centered inside the header.
The #header-bottom is like a sticky footer stuck at the bottom but no fixed.
Fiddle
Use this:
header {
display: flex; /* Magic begins */
flex-direction: column; /* Stack vertically */
height: 100%; /* As tall as the containing block */
justify-content: space-between; /* Distribute the flex items */
}
* {
padding: 0;
margin: 0;
}
html, body, header {
height: 100%;
}
header {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: green;
text-align: center;
}
header > div {
outline: 1px dotted red;
}
#header-top {
background-color: blue;
}
#header-middle {
background-color: yellow;
}
#header-bottom {
background-color: grey;
}
<header>
<div id="header-top">
<p>I am fixed at the top</p>
</div>
<div id="header-middle">
<p>I am vertically centered</p>
</div>
<div id="header-bottom">
<p>I am stuck at the bottom but not fixed</p>
</div>
</header>