here a parent div like this
.div parent{
width:100%;
height:100%;
text-align:center;
}
.div child{
width:10%;
height:10%;
}
In responsive web mobile devices the child div is not align vertically middle how can i align middle?? please help me..
Thanks.
Try adding :
.div parent{
vertical-align: middle;
width:100%;
height:100%;
text-align:center;
}
FIDDLE
This is an alternative take, using CSS tables
HTML
<div class='table'>
<div class='row'>
<div class='cell'>
<div>Child</div>
</div>
</div>
</div>
CSS
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
.table {
display:table;
table-layout:fixed;
width:100%;
height:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
border:1px solid grey;
vertical-align:middle;
text-align:center;
}
.cell div {
background:red;
display:inline-block;
margin:0 auto;
}
You have written .div parent seems to be an invalid selector, If you are trying to select a div with class parent, it should be selected using div.parent (Same applicable to your child div also).
Try this;
Apply diplay:table-cell; to .parent div, So that it will get the ability to align its child vertically middle.
then apply vertical-align:middle to the same to make the child elements vertically middle
div.parent{
width:100%;
height:100%;
text-align:center;
display:table-cell;
vertical-align:middle;
}
I know this post is old but here is another approach with Flex (also available in CodePen - http://codepen.io/KErez/pen/kXzYAj):
HTML:
<div class='a'>
<div class='b'>
Inner
</div>
</div>
CSS (the colors are just for showing the boxes clearly):
.a {
display: flex;
justify-content: space-around;
align-items: center;
color: #ffffff;
background-color: #223344;
width: 100%;
height: 100%;
}
.b {
display: flex;
justify-content: space-around;
align-items: center;
width: 75px;
height: 100px;
background-color: #999999;
color: #00ff00;
}
Very simple solution that I have used many times.
.a {
width: 300px;
height: 300px;
background-color:#666;
}
.b {
margin:auto;
width: 75px;
height: 100px;
top: calc(50% - 50px);
text-align:middle;
position: relative;
background-color:#111;
}
<div class='a'>
<div class='b'>
</div>
</div>
Related
In this case, the dynamic banner appears in some cases only. I have to put the Box div (angular component) at the end of the screen view but due to less height of its container, I am unable to do so. I tried setting the height to 100% which results in appearing the Box out of the screen. Just need a sample code for this layout so I can put it in my design. I have tried setting Box to bottom: 0, position: absolute but no luck.
You can make the Box parent a flex container and position it's children at the flex-end.
.parent {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
See example below:
.parent {
width: 200px;
height: 150px;
background-color: blue;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.box {
background-color: red;
height: 50px;
width: 100%;
}
<div class="parent">
<div class="box"></div>
</div>
Try this:
*{
box-sizing: border-box;
}
body{
padding:10px;
}
.div-wrapper{
border:1px solid #000;
padding: 20px;
}
.banner{
min-height:100px;
line-height:100px;
background: crimson;
color:#fff;
text-align:center;
border:2px solid green;
margin-bottom:20px;
}
.content-wrapper{
border:2px solid green;
height:auto;
display:flex;
padding:20px;
gap:20px;
}
.left-box,
.right-box{
padding:20px;
border:2px solid dodgerblue;
width:50%;
}
.right-box{
min-height:300px;
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-end;
}
.right-box .box{
width:100%;
height:50px;
background: royalblue;
}
<div class="div-wrapper">
<div class="banner">
BANNER
</div>
<div class="content-wrapper">
<div class="left-box">
</div>
<div class="right-box">
<div class="box">
</div>
</div>
</div>
</div>
I'm playing around with flex-direction:column to understand this property better. Here's a Codepen of my code and a snippet below :
.container {
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
max-width: 800px;
height: 500px;
border: 1px solid black;
}
div div
{
text-align:center;
padding:30px 30px;
width:20%;
flex:1;
}
.red { background-color:red; }
.orange { background-color:orange; }
.yellow { background-color:yellow; }
.green { background-color:green; }
.blue { background-color:blue; }
<div class="container">
<div class="red">RED</div>
<div class="orange">ORANGE</div>
<div class="yellow">YELLOW</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
Notice the text in the colored boxes are not vertically aligned. What causes this, and is there a way to align them vertically without nesting flexboxes within flexboxes?
By removing flex:1; on that div div, you get what (I think) you want.
Setting flex:1 means every box would take 1/5 of the parent's height. And since you have this fixed height on the parent, boxes are taking an height that is bigger than what is normally made with their content and padding.
Or you you could remove that height: 500px; from the parent, and keep everything as it is, like so:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
max-width: 800px;
border: 1px solid black;
}
div div {
padding: 30px 30px;
width: 20%;
text-align: center;
flex:1;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="container">
<div class="red">RED</div>
<div class="orange">ORANGE</div>
<div class="yellow">YELLOW</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
Actually the reason the boxes look like that is: padding
To center text and content both horizontally and vertically in flex logic, you can add justify-content and align-items to the boxes.
div div {
display: flex;
justify-content: center;
align-items: center;
}
For your question:
.container {
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
max-width: 800px;
height: 500px;
border: 1px solid black;
}
div div
{
width:20%;
flex:1;
display: flex;
justify-content: center;
align-items: center;
}
.red { background-color:red; }
.orange { background-color:orange; }
.yellow { background-color:yellow; }
.green { background-color:green; }
.blue { background-color:blue; }
<div class="container">
<div class="red">RED</div>
<div class="orange">ORANGE</div>
<div class="yellow">YELLOW</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
Since you asked to not use flexbox a possible approach is to use display: grid along with place-content: center
.container {
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
max-width: 800px;
height: 500px;
border: 1px solid black;
}
div div
{
text-align:center;
padding: 30px;
width:20%;
flex: 1;
display: grid;
place-content: center;
}
.red { background-color:red; }
.orange { background-color:orange; }
.yellow { background-color:yellow; }
.green { background-color:green; }
.blue { background-color:blue; }
<div class="container">
<div class="red">RED</div>
<div class="orange">ORANGE</div>
<div class="yellow">YELLOW</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
and, as specified from other users, the position of the text in your example depends on the padding-top you set, as you can see from a web inspector
Here you can find a bunch of ways to vertically center text: How do I vertically align text in a div?
And this answer to the previous question tells you how to do it without flex, nor position absolute, just using line-height:
https://stackoverflow.com/a/4915529/11569755
That's useful when you know the height of your child div's, like in your example.
So you could add:
line-height: 40px;
to your div's, that would make it.
The number 40 comes from the height of the parent div (500px). As it has 5 children with the same flex properties, each one is 100px high, minus 60px of vertical padding (30px top, 30px bottom), that makes 40px.
You could also remove the padding and set the line-height to 100px.
If in a real case you won't know the height of the element, you should use one of the other approaches.
I need to align 3 div's floated side by side. Below is my code however all the DIV's appear under each other, i'm guessing this is because of the fixed position. However this is the positioning I need for my website.
.one is sidelinks bar which I would like to have a min width: of 150px
.two is for adverts and instructions links
.three is a long div filled with data which needs to be scrollable. I tried to may methods but nothing works could jquery help? I want all to be of fixed position. I would also like the DIVs to remain the same size when the window is minimized.
Thanks
<!DOCTYPE html>
<html>
<head>
<style>
.one {
height:50px;
width:34%;
float:left;
background-color:red;
position:fixed;
}
.two {
height:50px;
width:33%;
float:left;
background-color:blue;
position:fixed;
}
.three{
height:50px;
width:33%;
float:left;
background-color:green;
position:fixed;
overflow:scroll;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
</html>
FOLLOW ON EDIT:
I'm able to split the DIVS apart but then the window is minimised the .two div floats over the .one div. see image https://postimg.cc/kDQSJpDR
.one {
height:50px;
width:33%;
float:left;
background-color:red;
position:fixed;
min-width:200px;
}
.two {
height:50px;
width:33%;
margin-left: 34%;
float:left;
background-color:blue;
position:fixed;
}
.three{
height:50px;
width:33%;
margin-left: 68%;
float:left;
background-color:green;
position:fixed;
overflow:scroll;
}
Did you want something like this?
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.justify-start {
justify-content: flex-start;
}
.flex-grow {
flex: 1 0 0;
}
.p-fixed {
position: fixed;
}
.w-150px {
height: 100%;
min-width: 150px;
max-width: 150px;
}
.wh-100v {
height: 100vh;
width: 100vw;
}
.wh-100p {
width: 100%;
height: 100%;
}
.overflow-scroll {
overflow: scroll;
}
.pink {
background-color: pink;
}
.red {
background-color: red;;
}
.green {
background-color: green;
color: white;
}
.text-justify {
text-align: justify;
}
<div class="flex-container justify-start wh-100v p-fixed">
<div class="w-150px flex-grow pink"></div>
<div class="wh-100p flex-grow red"></div>
<div class="wh-100p flex-grow green overflow-scroll text-justify">
<img src="https://via.placeholder.com/1000x1000"/>
</div>
</div>
If so, flexbox and a container as what #elbrant suggested is all that you'll need. Also, here's a working example :)
A quick note: Since both our flex-items' flex-grow property is set to the same value, those two above-mentioned items will always equally occupy their parent regardless of its size.
please add "margin-left:34%" in .two css and "margin-left:68%" in .three css.
<!DOCTYPE html>
<html>
<head>
<style>
.one {
height:50px;
width:34%;
float:left;
background-color:red;
position:fixed;
}
.two {
height:50px;
width:33%;
margin-left: 34%;
float:left;
background-color:blue;
position:fixed;
}
.three{
height:50px;
width:33%;
margin-left: 68%;
float:left;
background-color:green;
position:fixed;
overflow:scroll;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
</html>
I believe you are trying to do this:
<!DOCTYPE html>
<html>
<head>
<style>
.one, .two, .three {
top:0;
position:fixed;
height:50px;
}
.one {
left:0;
width:34%;
background-color:red;
}
.two {
left:34%;
width:33%;
background-color:blue;
}
.three{
left:67%;
width:33%;
background-color:green;
overflow:scroll;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
</html>
The best way to make sure that your columns are in a set position (regardless of screen size) is to wrap them in a container.
CSS changes
Each of these grid-areas contain a series of numbers which designate where their sides are by top/left/bottom/right telling us that the sides of column .one are located at the position 1/1/2/2. It will be easier to understand if you draw a rectangle on a piece of scrap paper and put two lines in it from top to bottom, a rough draft of your column placement. Count your lines based on each column. For the first column: the top of the rectangle is line 1, the bottom is line 2. The left is line 1, the right side is line 2. Represented by 1/1/2/2. That gives each of your columns a fixed position.
.one {
grid-area: one 1/1/2/2;
height:150px;
min-width:150px;
background-color:red;
}
.two {
grid-area: two 1/2/2/3;
height:150px;
min-width:150px;
background-color:blue;
}
.three{
grid-area: three 1/3/2/4;
height:150px;
min-width:150px;
background-color:green;
overflow:scroll;
}
.grid-container {
display: grid;
grid-template areas: 'one two three';
margin-left: auto;
margin-right: auto;
padding: 0;
max-width: 100%;
position: center;
border: solid 1px #000;
}
.grid-container > div {
margin: 5px;
padding 0;
}
HTML changes
<div class="grid-container">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div><!-- end container div -->
I have 4 divs aligned horizontally in the same line. I'm trying to center vertically the second and third through 'vertical-align' attribute with no success.
#container {
width:100%;
height:45px;
background-color:yellow;
}
#left {
width:100px;
height:45px;
float:left;
background-color:red;
}
#center1 {
width:100px;
height:45px;
display:inline-block;
background-color:green;
vertical-align: center;
word-break: break-word;
}
#center2 {
width:100px;
height:45px;
display:inline-block;
background-color:orange;
word-break: break-word;
}
#right {
width:100px;
height:45px;
float:right;
background-color:blue;
}
<div id="container">
<div id="left"> </div>
<div id="center1">Center 1</div><div id="center2">Center 2 Center 3</div>
<div id="right"> </div>
</div>
View in Fiddle
I don't want to align second and third content with 'position: relative; top: Xpx' or 'line-height: 45px;' due to second and third can have until two lines so I need to stay correctly aligned with one line and two lines.
Just add display: inline-flex; and align-items: center; to #center1 and #center2.
Edit: Dont forget to float them left.
Example:
#container {
width:100%;
height:45px;
background-color:yellow;
}
#left {
width: 100px;
height:45px;
float:left;
background-color:red;
}
#center1 {
width: 100px;
height:45px;
background-color:green;
float: left;
display: inline-flex;
align-items: center;
}
#center2 {
width: 100px;
height:45px;
background-color:orange;
float: left;
display: inline-flex;
align-items: center;
}
#right {
width: 100px;
height:45px;
float:right;
background-color:blue;
}
<div id="container">
<div id="left"> </div>
<div id="center1">Center 1</div><div id="center2">a long line of text!</div>
<div id="right"> </div>
</div>
I would probably use flexbox, it will make it easier to have a bar like that and easier to center thing vertically.
Have a look.
body {
margin: 0;
}
.flex-bar {
display: flex;
width: 100%;
}
.box {
display: flex;
width: 95px;
height: 40px;
justify-content: center;
align-items: center;
padding: 2.5px;
}
.filler {
flex: 1;
}
.red {
background: red;
}
.green {
background: green;
}
.orange {
background: orange;
}
.yellow {
background: yellow;
}
.blue {
background: blue;
}
<div class="flex-bar">
<div class="red box"></div>
<div class="green box">Centered #1</div>
<div class="orange box">Centered text number 2</div>
<div class="box yellow filler"></div>
<div class="blue box"></div>
</div>
I hope this helps.
You need to use vertical-align:middle; on both, the second and third element like this:
#table{
display:table;
width:100%;
}
#container{
display:table-row;
}
#left{
display:table-cell;
height:100%;
width:100px;
line-height:45px;
background-color:red;
}
#center1{
width:100px;
line-height:45px;
text-align:center;
display:table-cell;
background-color:green;
word-break: break-word;
vertical-align:middle;
}
#center2{
width:100px;
line-height:45px;
text-align:center;
display:table-cell;
background-color:orange;
word-break: break-word;
}
#space{
background-color:yellow;
display:table-cell;
}
#right{
width:100px;
line-height:45px;
display:table-cell;
background-color:blue;
}
<div id="table">
<div id="container">
<div id="left"> </div>
<div id="center1">
Center 1
</div>
<div id="center2">
Center 2 <br>Center 3
</div>
<div id="space">
</div>
<div id="right" style=""> </div>
</div>
</div>
Updated to center the text vertically and not only the element
To position the text, use line-height (vertical position) which should be equal to the height of the element and text-align:center to center the text horizontally.
When there is no content in <div #id="profile-body"></div> the divs are parallel thanks to display: inline-block;, but when I fill this div with any kind of content, the height of the content acts as though it's changing the other divs margin-top that are parallel.
stylesheet.css
.profile-header{
margin: 0%;
padding: 0%;
font-size: 1em;
display: block;
}
.profile-body{
margin-left: 2%;
}
#profile-left{
display: inline-block;
width: 30%;
height:100%;
min-height:300px;
}
#profile-middle{
display: inline-block;
width: 30%;
height:100%;
min-height:300px;
}
#profile-middle-body div{
display: inline-block;
width: 30%;
}
#profile-middle-body p{
display: inline-block;
width: 65%;
}
#profile-right{
display: inline-block;
width: 30%;
height:100%;
min-height:300px;
}
index.html
<div id="profile-left">
<div class="profile-header">
<hr><p>Too Excessive</p><hr>
</div>
</div>
<div id="profile-middle">
<div class="profile-header">
<hr><p>Bio</p><hr>
</div>
<div id="profile-middle-body">
<!-- Comment to fix dix placement -->
<div>name</div><p>Brandon Nadeau</p>
<div>age</div><p>17</p>
<div>location</div><p>Alaska</p>
<div>member for</div><p>1 year</p>
<div>profile views</div><p>62</p>
</div>
</div>
<div id="profile-right">
<div class="profile-header">
<hr><p>About Me</p><hr>
</div>
</div>
Use float to those 3 divs. It should go up and remain there.
Fiddle
#profile-right{
width: 30%;
height:100%;
min-height:300px;
float:left;
}
#profile-left{
width: 30%;
height:100%;
min-height:300px;
float:left;
}
#profile-middle{
width: 30%;
height:100%;
min-height:300px;
float:left;
}
Since you're using inline-block with % widths for the layout - if you want to avoid floats, you could also try vertical-align:top; on all 3 divs.