I have a problem with getting text to appear in the middle of the screen (height-wise) on a webpage. The HTML of the site is:
<html lang="en">
<head>
<title>example</title>
<link href="example.css" rel="stylesheet">
</head>
<body>
<div class="home-container">
<div class="home-row">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
</div>
</body>
</html>
What I want to do is have the home-container element stretch all the way to the bottom of the page, and have the text that should be in the middle in the middle of it. My css looks like:
html, body{
height:100%;
}
.home-container{
width: 100%;
height: 100%;
background-color: rgba(139,0,0,0.4);
}
.home-row{
vertical-align: middle;
}
I understand that what I want to do is possible if I instead make home-container like so:
.home-container{
width: 100%;
height: 100%;
background-color: rgba(139,0,0,0.4);
align-items: center;
display: flex;
}
but this doesn't work on all browsers. What am I doing wrong with the vertical-align property? Id isn't really doing anything in my example...
to use vertical-align:middle add display:table-cellon .home-row and display:table on .home-container
see here jsfiddle or snippet
html,
body {
height: 100%;
}
.home-row {
vertical-align: middle;
display: table-cell;
}
.home-container {
width: 100%;
height: 100%;
background-color: rgba(139, 0, 0, 0.4);
display: table;
}
<div class="home-container">
<div class="home-row">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
</div>
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
read more here vertical align
EDIT 2020
There's a better way to achieve the same result using flexbox
Check snippet below
Play around with flexbox. You can add it on other items not just the container
.home-container {
background: red;
display:flex;
flex-direction: column;
justify-content: center;
height:100vh;
}
<div class="home-container">
<div class="home-row">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
</div>
Try this:
<style>
.home-container {
width: 100%;
height: 800px;
background-color: rgba(139, 0, 0, 0.4);
text-align: center;
}
.some-other-class {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
HTML
<div class="home-container">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
html, body{
height:100%;
margin: 0;
}
.home-container{
width: 100%;
height: 100%;
display: table;
text-align: center;
background-color: rgba(139,0,0,0.4);
}
.home-row{
display: table-cell;
vertical-align: middle;
}
<html lang="en">
<head>
<title>example</title>
<link href="example.css" rel="stylesheet">
</head>
<body>
<div class="home-container">
<div class="home-row">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
</div>
</body>
</html>
Related
I have an issue where an element is auto-sized by an unknown image's dimensions. I'd like a sibling element to this image to be constrained by the same width as the image is set to. Without using javascript.
I've set up a pen to show what I mean:
.container {
display: table
}
.img-wrapper {
line-height: 0
}
.info {
display: table-cell;
vertical-align: middle;
background: black;
color: white;
}
.info p {
margin: 0 2vmin
}
<div class="container">
<div class="img-wrapper">
<img src="https://picsum.photos/600/500">
</div>
<div class="info">
<p>Lorem ipsum </p>
</div>
</div>
https://codepen.io/Slagon/pen/oNePqNo
Is it possible for .info to be as wide .img-wrapper? (Ignore that the dimensions are predefined in this pen).
I used Bootstrap to solve this. Essentially how it works is a normal webpage spans 12 columns. So in this case I put each of you divs in a col-6 so that each element would take up half of the page. BOTH of these col-6 spans are contained by a row. Please see below.
.container {
display: block;
justify-content: center;
}
.img-wrapper {
line-height: 0;
}
.info {
display: flex;
background: black;
color: white;
width: 100%;
height: 100%;
}
.col-6 > .img-wrapper > img {
width: 100%;
height: 100%;
margin: 0;
}
div.col-6 {
padding: 0;
}
p {
width: 100%;
text-align: center;
margin: auto;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<div class="img-wrapper">
<img src="https://picsum.photos/600/500">
</div>
</div>
<div class="col-6">
<div class="info">
<p>Lorem ipsum </p>
</div>
</div>
</div>
</div>
</body>
Click full-page
This question already has answers here:
How to make Flexbox items the same size
(10 answers)
Closed 2 years ago.
I have three boxes in a container. I applied display: flex, and I set flex-grow: 1; on children. Everything was fine until I put some text into a child when the box got bigger. How to make the children to remain o a same width even if I put some content into them?
html, body{
width: 100%;
height: 100%;
}
.page-wrapper{
width: 100%;
height: 50%;
display: flex;
}
.column{
height: 100%;
border: 1px solid red;
flex-grow: 1;
margin: 20px 10px;
}
<!DOCTYPE html>
<html>
<header>
<link rel="stylesheet" href="main.css">
</header>
<body>
<div class="page-wrapper">
<div class="column">
<h1>Hello World</h1>
</div>
<div class="column"></div>
<div class="column"></div>
</div>
<div class="img"></div>
</body>
</html>
Add flex-basis: 0 to your .column element. No matter how many columns you end up using, flex-basis: 0 will always make each of your columns be of equal width.
.column {
height: 100%;
border: 1px solid red;
margin: 20px 10px;
flex-grow: 1;
flex-basis: 0;
}
html, body{
width: 100%;
height: 100%;
}
.page-wrapper{
width: 100%;
height: 50%;
display: flex;
}
.column{
height: 100%;
border: 1px solid red;
flex-grow: 1;
flex-basis: 33.33%;
}
<!DOCTYPE html>
<html>
<header>
<link rel="stylesheet" href="main.css">
</header>
<body>
<div class="page-wrapper">
<div class="column">
<h1>Hello World</h1>
</div>
<div class="column"></div>
<div class="column"></div>
</div>
<div class="img"></div>
</body>
</html>
Try this code.
I have problem with flex-wrap. When I set it and set width of child to 100% (to take entire "line"), it dont shrink.
Look at my code:
https://codepen.io/dinoq-the-reactor/pen/OJRJoNm
HTML:
<div id="main-container">
<div id="sub-container">
<div class="flex-container">
<div id="i1" class="flex-item">Icon</div>
<div id="i2" class="flex-item">some text, flex it!</div>
<div id="i3" class="flex-item">Icon</div>
<div id="i4" class="flex-item">Text on new line</div>
</div>
<div>
</div>
CSS:
#main-container{
width: auto;
position: absolute;
z-index: 9900;
}
#sub-container{
width:100%;
}
.flex-container {
background-color:blue;
display: flex;
flex-wrap: wrap;
}
.flex-item {
border: solid 1px green;
border-collapse: collapse;
background: grey;
color: white;
font-size: 3em;
}
#i2{
flex: 1;
}
#i4{
flex: 0 0 100%;
}
What I want is to achieve something like this:
Instead I got this:
Note: I really need use "flex-wrap" and html structure which I have... It is part of bigger project, and I can edit only CSS...
Note2: My container is so expanded because width of it is width of all child elements, so it counts width of my 4. child (which is on new line). This is some source of problem, but how it solve?
Thanks!
Below is the solution for your problem.
#main-container {
width: auto;
position: absolute;
z-index: 9900;
}
#sub-container {
width: 100%;
}
.flex-container {
background-color: gray;
font-size: 0;
}
.flex-item {
border: solid 1px green;
border-collapse: collapse;
color: white;
font-size: 3em;
display: inline-block;
font-size: 3rem;
}
.flex-item:last-child {
display: block;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="main-container">
<div id="sub-container">
<div class="flex-container">
<div id="i1" class="flex-item">Icon</div>
<div id="i2" class="flex-item">some text, flex it!</div>
<div id="i3" class="flex-item">Icon</div>
<div id="i4" class="flex-item">People of this world are travellers</div>
</div>
<div>
</div>
</body>
</html>
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 2 years ago.
I've managed to get the #feature_container to grow to the remaining space of #header but I don't want the feature boxes to also grow (in pink), how can I stop the feature box from stretching as well? My aim is to have the 3 feature boxes sitting in the middle but I want to still be able to control the size of the feature boxes and just keep them in the middle of the remaining space.
Here is an example of what I am trying to do:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#header {
height: 100vh;
height: 100%;
background-color: grey;
}
#fixed_div {
display: inline-block;
}
#feature_header_container {
display: flex;
height: 100%;
background-color: red;
}
#feature_container {
display: inline-flex;
flex-grow: 1;
justify-content: center;
background-color: blue;
color: white;
}
.feature_box {
display: inline-flex;
background-color: pink;
}
<div id="header">
<div id="fixed_div">
<p>Hello World!</p>
</div>
<div id="feature_header_container">
<div id="feature_container">
<div class="feature_box">
<p>Test</p>
</div>
<div class="feature_box">
<p>Test</p>
</div>
<div class="feature_box">
<p>Test</p>
</div>
</div>
</div>
</div>
#feature_container {
...
align-items: center;
...
}
.feature_box {
...
height: 50px;
...
}
Please find the answer here.
You can use the below style to #feature_header_container .And i have added the padding and margin separate the each items. If you don't want that, you can remove them.
.feature_box {
background-color: #C71585;
height: 10%;
width: 10%;
text-align: center;
padding:10px;
margin:10px;
}
code
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#header {
height: 100vh;
height: 100%;
background-color: grey;
}
#fixed_div {
display: inline-block;
}
#feature_header_container {
display: flex;
height: 100%;
align-items: center;
background-color: #006effc5;
}
#feature_container {
display: inline-flex;
flex-grow: 1;
justify-content: center;
color: white;
}
.feature_box {
background-color: #C71585;
height: 10%;
width: 10%;
text-align: center;
padding:10px;
margin:10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="header">
<div id="fixed_div">
<p>Hello World!</p>
</div>
<div id="feature_header_container">
<div id="feature_container">
<div class="feature_box">
<p>Test</p>
</div>
<div class="feature_box">
<p>Test</p>
</div>
<div class="feature_box">
<p>Test</p>
</div>
</div>
</div>
</div>
</body>
</html>
I am working on learning responsive web design, but have run into a small issue. I have an <aside> and a <section> side-by-side. I wanted the aside to be the same size and the section to automatically take up the rest of the width. Is this possible?
Here is the code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<body>
<aside id="sidebar">text</aside>
<section id="main">main section</section>
</body>
</html>
Here is the css.
*{
margin: 0px;
padding: 0px;
}
#main{
display: inline-block;
vertical-align: top;
background-color: red;
margin: -4px;
}
aside{
display: inline-block;
vertical-align: top;
width: 200px;
height: 100%;
margin: -4px;
background-color: blue;
}
Here is the jsfiddle.
https://jsfiddle.net/ehftnp3u/
Use flex
#container .row {
display: flex;
}
#container aside {
width: 150px;
}
#container section {
flex: 1;
}
#main{
background-color: red;
}
<div id="container">
<div class="row">
<aside>
<span>sidebar</span>
</aside>
<section id="main">
<span>main section</span>
</section>
</div>
</div>
For old browser support you can use display: table or float
Sample using float
#container .row:after { /* clear fix for your float */
content: '';
display: table;
clear:both;
}
#container aside {
float: left;
width: 150px;
}
#container section {
margin-left: 150px;
}
#main{
background-color: red;
}
<div id="container">
<div class="row">
<aside>
<span>sidebar</span>
</aside>
<section id="main">
<span>main section</span>
</section>
</div>
</div>
Just add width in your aside and section as below, this works perfectly on responsive page too.
#main{
width:70%;
}
aside{
width: 30%;
}
You can make the section and aside behave like table-cells to achieve the effect you want
#container {
display:table;
width:100%;
}
#container .row {
display:table-row;
}
#container aside, #container section {
display:table-cell
}
aside {
width:200px;
background:blue;
}
#main{
vertical-align: top;
background-color: red;
margin: -4px;
}
<body>
<div id="container">
<div class="row">
<aside>
<span>sidebar</span>
</aside>
<section id="main">
<span>main section</span>
</section>
</div>
</div>
</body>