I know margin:0 auto; will center a div horizontal but I also want to center it vertically so I used this
vertical-align:middle;
top:50%;
transform:translate Y(-50%);
But when I run this code the div is centered vertically but it doesn't center horizontally. Please can someone give me a better clue on how to center a div both vertically and horizontally.
To center both vertically and horizontally following your attempt, try this:
// assumed positioned element
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Reference, and another good resource.
Flex has become extremely popular, I would recommend that because of its other capabilities.
Fiddle: https://jsfiddle.net/ne38nx7t/1/
HTML:
<div class="Aligner">
<div class="Aligner-item">Apples</div>
</div>
CSS:
.Aligner {
height: 100px;
border: 2px solid blue;
display: flex;
align-items: center;
justify-content: center;
}
Flex Vertical
I haven't seen your entire code feel free to post your code on to a fiddle, till then check the following fiddle I created to, center content horizontally and vertically, where in the content has a dynamic height
http://jsfiddle.net/Q92Lb/2/
<html>
<head>
<style>
* { margin: 0; padding: 0; }
#page{display:table;overflow:hidden;margin:0px auto;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/
#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/
*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/
html,body{height:100%;}
#page{height:100%;width:465px;}
</style>
</head>
<body>
<div id="page">
<div id="content_container">
<div id="content">
<p>your content</p>
</div>
</div>
</div>
</body>
</html>
Related
I would like to show a vertically centered loading spinner like one of these https://github.com/jlong/css-spinners in a web page. Follow the codepen.io link on that page to see them in motion.
How can I do this via CSS? Consider I am dealing with a Google App Engine application based on Python, Twitter Bootstrap and Polymer.
Let's assume you go with the "Plus" spinner. You can wrap this in a fixed position div that covers the whole page:
<div id="pluswrap">
<div class="plus">
Loading...
</div>
</div>
Since you might want to use different spinners at times, which have a different width, the CSS shouldn't hardcode the width. You can center an item vertically in a flexbox, and then use margin: 0 auto; on the item to be centered horizontally.
#pluswrap {
position: fixed;
width: 100%;
height:100%;
display: flex;
align-items: center;
top: 0;
}
.plus {
display: flex;
margin: 0 auto;
}
This way, you can even color the background, make it semi-transparent etc.
Here's a JSFiddle
I don't know anything about a google app engine I'm afraid but to centre an element that has a width and height is pretty easy.
I assume this is a fixed positioned element so just use top,right,left and bottom and then use margin:auto to center vertically and horizontally.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.spinner{
position:fixed;
z-index:99;/* make higher than whatever is on the page */
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
background:red;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
HTML
<div id="pluswrap">
<div class="plus">
Loading...
</div>
</div>
CSS
#pluswrap {
position: fixed;
width: 100%;
height:100%;
display: flex;
top: 0;
}
.plus {
margin: auto;
}
Only display:flex to parent and margin: auto will do the required thing.
Here is JS Fiddle
I cannot seem to position text on the right side of this footer:
FIDDLE
Basically what happens is that I need the "center" class to keep the text vertically aligned on the footer, but using the "center" class and the "text-right" class (In bootstrap) will have the text messed up. If I only use the "text-right" class, the text is on the right, but way up top.
The CSS for .center is:
.center {
margin: 0;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
Approach one - Bootstrap method (example):
Modified HTML:
<footer>
<div class="container-fluid">
<div class="row center">
<p class="col-xs-9">...</p>
<div class="col-xs-3 text-right">
...
</div>
</div>
</div>
</footer>
Basically, just added the container/row elements and use columns. Add your custom center class to the row element.
Approach two (example):
Set the display of the footer element to table, and then set the display of the children elements to table-cell and use vertical-align: middle for vertical centering.
footer {
background: #ECECEC;
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
display:table;
}
footer > p,
footer > div {
display:table-cell;
vertical-align:middle;
padding:20px;
}
Approach three (example):
Since the height of the footer is fixed, an arguably hackish solution would be to set a line-height with a value equal to the footer's height - in this case, 100px. You would also have to swap out text-right for pull-right/pull-left.
Approach four - using your custom center class (example):
.center {
margin: 0;
position: absolute;
top: 50%;
transform: translate(0, -50%);
width:100%;
}
Modified HTML:
<p class="text-left center">...</p>
<div class="text-right center"> ...
Are you using flex layout then this will be the perfect way and easiest way to do it
.center {
display: flex;
align-items: center;
justify-content: center;
}
Awesome read about centering text : https://webdesign.tutsplus.com/tutorials/how-to-create-perfectly-centered-text-with-flexbox--cms-27989
I am building a website and I am using 2000px wide images. I want the images to be visible on wide screens (like mine - im using TV as monitor) but the smaller screens will only see the images size adequate to their size. (rest will be cropped). The problem is that the image must be centered no matter what size the viewport is. I have used text-align:center; to make the text responsive. I did read the similar topics but no matter what I do the image stays static and not centered. Please help.
HTML:
<body>
<div id="wrapper">
<div class="header">
<img src="images/design/header.png">
</div>
<div class="nav-bar">
Home
About
Portfolio
Gallery
Service
Contact
</div>
<div class="side-bar">
<h1>This is my side bar</h1>
</div>
<div class="content">
<h1>This is my content</h1>
</div>
<div class="footer">
<h1>This is my footer</h1>
</div>
</div>
</body>
CSS:
#wrapper {
max-width: 2000px;
margin: -8px;
overflow: hidden;
text-align: center;
}
One way is to use a responsive layout. Twitter Bootstrap provides the same by default.
Another way is by using #media tags. Refer http://www.w3schools.com/css/css_mediatypes.asp . Here, you will need to make a function like this: Get the screen size using mediacheck and then set up thresholds using #media.
Use the following css to make the image center. max-width:100% will fit the image if the container is smaller than the image width. the image width and height will be reduced to fit.
#wrapper > .header img
{
display: block;
height: auto;
max-width: 100%;
margin:0 auto; /* to make the image center of its container, if container is larger than image size */
}
Update
If you know the exact height of the image, then please see this fiddle. Resize fullscreen to see the image cropping.
HTML:
<div class="position-img-outer">
<div class="position-img-inner">
<img src="http://placehold.it/1000x300" class="position-img" alt="img" style=" height: 300px; " />
</div>
</div>
CSS:
.position-img-outer
{
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.position-img-outer .position-img-inner
{
display: inline-block;
position: relative;
right: -50%;
}
.position-img-outer .position-img-inner .position-img
{
position: relative;
left: -50%;
}
If you know the width of the images, you can use the following:
#wrapper .header img{
position:relative;
width:2000px;
left:50%;
margin-left:-1000px;
}
UPDATE:
To avoid a horizontal Scrollbar, you can set the container element to width:100% and overflow:hidden
#wrapper .header {
position:relative;
width:100%;
overflow:hidden;
}
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.
i am trying to create a website with div's and css styleing, what i want to do is sit 2 divisions one on top of the other, but centered to the middle of the page, so the top box will be called container, and the bottom box will be called quicklinks
an example of what im trying to achieve is http://www.whirlpool.net.au/
so i have two div boxes the top container will contain all the page info, and the bottom will have an extrernal styleing to make editing links easyier as it will be placed on each page of the website, but im not sure if its possible this way?
both div's will be 900px wide
the container will have a height of 0 auto; so it grows with the content placed inside.
the quicklinks div will have a height of 60px and will obviously move up and down the page under the container box when the content inside grows or shrinks.
i used the
<stlye type="text/css">
.container{<br>
position:absolute: <br>
left: 50%;<br>
width: 900px;<br>
height: 0 auto;<br>
top: 0%;<br>
margin-left: -450px;<br>
}
.quicklinks{<br>
position:static; <br>
left: 50%;<br>
width: 900px; <br>
height: 60px; <br>
margin-left: -450px; <br>
}
</style>
</head>
<body>
<div class="container"></div><br>
<div class"quicklinks"></div><br>
</div>
</body> <br>
</html>
and this code above will bring the container box to the very center of the page but the quicklinks div will sit over the top of this and i need it to fall under it.
<stlye type="text/css">
.container{<br>
width: 900px;<br>
height: 0 auto;<br>
top: 0%;<br>
}
.quicklinks{<br>
position:static; <br>
width: 900px; <br>
height: 60px; <br>
}
</style>
</head>
<body>
<div class="container"></div><br>
<div class"quicklinks"></div><br>
</div>
</body> <br>
</html>
this code above will bring the quicklinks div under the container but both will sit at the top left corner, i can get it to look like its in the center but i want it to acturley find the center per browser.
so could any one please help with this,
am i usign the correct way of scripting to achieve this, and if so
what am i missing out to correct the problem?
cheers
paul
I used your top example and spelt style correctly and assigned the class quicklinks also.
Then margin:auto for both divs worked a treat. I also removed the position:static, didn't think it was needed.
.container{
width: 900px;
height: 0 auto;
top: 0%;
margin: auto;
}
.quicklinks{
width: 900px;
height: 60px;
margin: auto;
}
Phil
To achieve this effect you need something like this
body {text-align:center;}
#wrapper {margin-left:auto;margin-right:auto; text-align:left;width:900px;}
#container{}
#quicklinks{}
<div id="wrapper">
<div id="container">
</div>
<div id="quicklinks">
</div>
</div>
Once you have established the page width and centering with a wrapper the default behaviour for divs is to appear one below the other.
This is a rather simple task to achieve, all you need to do is to set margin:0 auto; to both div's this will center them both.
The code example below is a very simple example of this.
<style>
.box {width:900px; margin:10px auto; padding:10px; border:5px solid #000;}
</style>
<div class="box">Top Box</div>
<div class="box">Bottom Box</div>
An even better way to achieve this would be to use a containing DIV which you use to fix the width and center
<style>
.container {width:900px; margin:0 auto; padding:10px; border:5px solid #99cc00; }
.box {margin-top:10px; padding:10px; border:5px solid #000;}
</style>
<div class="container">
<div class="box">Top Box</div>
<div class="box">Bottom Box</div>
</div>