Look,
I tried to do this, but I'm tired.
I have this HTML:
<div id="external" style="margin: 0 auto; height:auto; border:1px solid #ccc;">
<div class="mycontent">
X, Y
<br/>
Z, W
</div>
</div>
What I want is that the "external" div have the height of "mycontent" div, but it only works when "external" has float:left defined in the styles. I cannot use "float:left" because I need the "external" div be centered always.
How can I solve it?
The height of the #external div is already the same height as the .mycontent div.
Run this jsFiddle and all you will see is the orange background I set for the .mycontent div and not the blue background I set for the #external div.
If you want the #external div to essentially wrap the .mycontent div vertically and horizontally, while at the same time being centered in the screen, use display: table and display: table-cell.
See jsFiddle demo
HTML
<div id="external">
<div class="mycontent">
X, Y
<br/>
Z, W
</div>
</div>
CSS
#external
{
display: table;
margin: 0 auto;
border: solid 1px #ccc;
background: blue; /* for demo purposes */
}
.mycontent
{
display: table-cell;
background: orange; /* for demo purposes */
color: white; /* for demo purposes */
}
I'm trying to get a parent div tag to hold n children div tags such that they are all on the same line, yet grouped together in the center. For example:
Here the children are blue, and the parent is red.
Here are the things I've tried:
Making blue divs display:inline to get them on the same line. Problems: doesn't display even with its width and height both set to 10px.I tried adding , but it only was a couple pixels wide.
Making blue divs float:left. Problems: Have to programmatically resize red parent to child contents since the divs are floated and then center in its parent to get what I want. There should be a solution that doesn't involve javascript.
For IE6 and IE7 compatibility you might have to add zoom:1; and *display:inline; to your child CSS
jsFiddle
.parent {width:100%;border:1px solid red;text-align:center;}
.child {width:15%;display:inline-block;border:1px solid blue;}
<style>
.container {
width: 100%;
padding: 0;
text-align: center;
border: 1px solid red;
}
.inner {
display: inline-block;
margin: 0 5px;
border: 1px solid blue;
}
</style>
<div class="container">
<div class="inner">
one
</div>
<div class="inner">
two
</div>
<div class="inner">
three
</div>
</div>
Stick the blue divs in a container div. Find their widths (margin and padding included) and give the container div that width. Then set the container div's margin to 0 auto, stick it in the red div and you should be fine.
Try to use display: inline-block;:
.child {
display: inline-block;
...
}
http://jsfiddle.net/mupuR/
I'm trying to center a div vertically in a parent div, where text is present. Here's what I've got:
It looks a little funny because the text seems to be centered properly, but the yellow boxes aren't. This is how I'm doing it:
.btn {
background-color: #ccc;
color: #000;
width: 200px;
border: solid 1px black;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.square {
background-color: #ff0;
width: 20px;
height: 20px;
display: inline-block;
}
.inner {
display: inline-block;
}
<div class="btn">
<div class="square"></div>
<div class="inner">Hello</div>
<div class="square"></div>
</div>
Should my usage of "table-cell" + vertical-align be working? I only care about html5, I'm really just targeting the latest versions of mobile safari, so don't have to worry about older browsers etc.
Here's a js fiddle of this:
http://jsfiddle.net/TrJqF/
Thanks
Set vertical-align:top on the square class. The extra space comes from space reserved for descendant text elements like j, g, y etc. that drop below the line.
jsFiddle example
Actually there is no difference between both the height. Apply yellow background color to inner class and see the difference in explicit and no height.
both square div doesn't have content and inner div have content. The css box aligning by itself based on its content. Add empty space to the square div as follows:
<div class="btn">
<div class="square"> </div>
<div class="inner">Hello</div>
<div class="square"> </div>
</div>
If you want you can add top and bottom margin 1 or 2 pixel which will show your expectation.
I have two divs in my page: leftpart and rightpart which has the following css:
.leftpart{
width:280px;
background:#0054a6;
color:#fff;
padding-top:40px;
height:100%;
min-height:637px;
box-shadow:3px 3px 10px #bebebe;
position:relative;
}
.rightpart{
width:75%;
padding-left:10px;
}
I want this sidebar(leftpart) till the end of my page(till the bottom). I've set the height to 100% but when I minimize the browser it shows the white space below the bar instead of showing blue background. I mean it does not take its height as 100%. How can I get that?
For a full length sidebar your best bet is probably the old faux columns method. You could do this in CSS but this is probably easier for you.
Put basically you want an image with your column background's in a thin long strip. You then add this as a background image to your parent div and it acts as pretend full height columns.
eg.
.container {
background: url(your_image) repeat-y left top;
}
<div class="container">
<div class="sidebar">SIDEBAR</div>
<div class="content">CONTENT</div>
</div>
You can read more about it here - http://www.alistapart.com/articles/fauxcolumns/
If you want to try this in CSS you could try the negative margins trick.
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
SIDEBAR
</div>
<div class="col2">
CONTENT
</div>
</div>
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 3 years ago.
I'm trying to make a small username and password input box.
I would like to ask, how do you vertically align a div?
What I have is:
<div id="Login" class="BlackStrip floatright">
<div id="Username" class="floatleft">Username<br>Password</div>
<div id="Form" class="floatleft">
<form action="" method="post">
<input type="text" border="0"><br>
<input type="password" border="0">
</form>
</div>
</div>
How can I make the div with id Username and Form to vertically align itself to the center? I've tried to put:
vertical-align: middle;
in CSS for the div with id Login, but it doesn't seem to work. Any help would be appreciated.
The best approach in modern browsers is to use flexbox:
#Login {
display: flex;
align-items: center;
}
Some browsers will need vendor prefixes. For older browsers without flexbox support (e.g. IE 9 and lower), you'll need to implement a fallback solution using one of the older methods.
Recommended Reading
Browser support
A Guide to Flexbox
Using CSS Flexible Boxes
This can be done with 3 lines of CSS and is compatible back to (and including) IE9:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Example: http://jsfiddle.net/cas07zq8/
credit
You can vertically align a div in another div. See this example on JSFiddle or consider the example below.
HTML
<div class="outerDiv">
<div class="innerDiv"> My Vertical Div </div>
</div>
CSS
.outerDiv {
display: inline-flex; // <-- This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white;
}
.innerDiv {
margin: auto 5px; // <-- This is responsible for vertical alignment
background-color: green;
}
The .innerDiv's margin must be in this format: margin: auto *px;
[Where, * is your desired value.]
display: inline-flex is supported in the latest (updated/current version) browsers with HTML5 support.
It may not work in Internet Explorer :P :)
Always try to define a height for any vertically aligned div (i.e. innerDiv) to counter compatibility issues.
I'm pretty late to the party, but I came up with this myself and it's one of my favorite quick hacks for vertical alignment. It's crazy simple, and easy to understand what's going on.
You use the :before css attribute to insert a div into the beginning of the parent div, give it display:inline-block and vertical-align:middle and then give those same properties to the child div. Since vertical-align is for alignment along a line, those inline divs will be considered a line.
Make the :before div height:100%, and the child div will automatically follow and align in the middle of a very tall "line."
.parent:before, .child {
display:inline-block;
vertical-align:middle;
}
.parent:before {
content:""; // so that it shows up
height:100%; // so it takes up the full height
}
Here's a fiddle to demonstrate what I'm talking about. The child div can be any height, and you never have to modify its margins/paddings.
And here's a more explanatory fiddle.
If you're not fond of :before, you can always manually put in a div.
<div class="parent">
<div class="before"></div>
<div class="child">
content
</div>
</div>
And then just reassign .parent:before to .parent .before
If you know the height, you can use absolute positioning with a negative margin-top like so:
#Login {
width:400px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-left:-200px; /* width / -2 */
margin-top:-200px; /* height / -2 */
}
Otherwise, there's no real way to vertically center a div with just CSS
In my firefox and chrome work this:
CSS:
display: flex;
justify-content: center; // vertical align
align-items: center; // horizontal align
I found this site useful: http://www.vanseodesign.com/css/vertical-centering/
This worked for me:
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
#GáborNagy's comment on another post was the simplest solution I could find and worked like a charm for me, since he brought a jsfiddle I'm copying it here with a small addition:
CSS:
#wrapper {
display: table;
height: 150px;
width: 800px;
border: 1px solid red;
}
#cell {
display: table-cell;
vertical-align: middle;
}
HTML:
<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here
</div>
</div>
</div>
If you wish to also align it horizontally you'd have to add another div "inner-cell" inside the "cell" div, and give it this style:
#inner-cell{
width: 250px;
display: block;
margin: 0 auto;
}
Vertically aligning has always been tricky.
Here I have covered up some method of vertically aligning a div.
http://jsfiddle.net/3puHE/
HTML:
<div style="display:flex;">
<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>
<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>
<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>
<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>
</div>
CSS:
em{font-style: normal;font-weight: bold;}
.container {
width:200px;height:200px;background:#ccc;
margin: 5px; text-align: center;
}
.content{
width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}
http://jsfiddle.net/dvL512e7/
Unless the aligned div has fixed height, try using the following CSS to the aligned div:
{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: table;
}
I needed to specify min-height
#login
display: flex
align-items: center
justify-content: center
min-height: 16em
if you are using fix height div than you can use padding-top according your design need.
or you can use top:50%. if we are using div than vertical align does not work so we use padding top or position according need.
simplest way to center your div element is to use this class with following properties.
.light {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Centering the child elements in a div. It works for all screen sizes
#parent {
background-color: red;
height: 160px;
display: flex;
/*vertical-align */
align-items: center;
/*horizontal align*/
justify-content: center;
}
#child {
background-color: orange;
height: 20px;
padding: 10px;
}
<div id="parent">
<div id="child">Content here</div>
</div>
I found a way that works great for me. The next script inserts an invisible image (same as bgcolor or a transparant gif) with height equal to half the size of the white-space on the screen. The effect is a perfect vertical-alignment.
Say you have a header div (height=100) and a footer div (height=50) and the content in the main div that you would like to align has a height of 300:
<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src='empty.jpg' height='" + imgheight + "'>");
</script>
You place the script just before the content that you want to align!
In my case the content I liked to align was an image (width=95%) with an aspect ratio of 100:85 (width:height).Meaning the height of the image is 85% of it's width. And the Width being 95% of the screenwidth.
I therefore used:
var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));
Combine this script with
<body onResize="window.location.href = window.location.href;">
and you have a smooth vertical alignment.
Hope this works for you too!
have you try this one?
.parentdiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height: 300px; // at least you have to specify height
}
hope this helps
divs can't be vertically aligned that way, you can however use margins or position:relative to modify its location.