I want to be able to center a div in the middle of a page but can't get it to work. I tried float: center; in css but it doesn't seem to work.
There is no float: center; in css. Use margin: 0 auto; instead. So like this:
.mydivclass {
margin: 0 auto;
}
You can do it inline like this
<div style="margin:0px auto"></div>
or you can do it via class
<div class="x"><div>
in your css file or between <style></style> add this .x{margin:0px auto}
or you can simply use the center tag
<center>
<div></div>
</center>
or if you using absolute position, you can do
.x{
width: 140px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -70px; /*half the size of width*/
}
Try margin: 0 auto, the div will need a fixed with.
If for some reason you have position absolute on the div, do this:
<div class="something"></div>
.something {
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
if you are using width and height, you should try margin-right: 45%;... it is 100% working for me.. so i can take it to anywhere with percentage!
Give the DIV a specific with in percentage or pixels and center it using CSS margin property.
HTML
<div id="my-main-div"></div>
CSS
#my-main-div { margin: 0 auto; }
enjoy :)
Simple solution:
<style>
.center {
margin: auto;
}
</style>
<div class="center">
<p> somthing goes here </p>
</div>
Try Online
Related
i am starting to learn css. I have this html and css. I am not able to center this image to center of the window. Please explain also how you got this output.
Edited :
I want it to be center both vertically and horizonally
Thank you.
.myClass {
background-image:url(http://www.funklix.in/wp-content/uploads/2014/07/Clip-art-free-1.gif);
height:250px;
width:250px;
}
<div class="myClass">
</div>
Here are solutions for centering div!
StackOverflow Answer
This is my preferred solution.
HTML:
<div class="container"><div class="container__inner"></div></div>
CSS:
.container{
position:relative;
}
.container__inner{
width: 250px;
height: 250px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Note that this solution only works if the container has a fixed height!
Read more about this here
http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
You need to add margin to your class.
.myClass {
background-image:url(http://www.funklix.in/wp-content/uploads/2014/07/Clip-art-free- 1.gif);
height:250px;
width:250px;
margin:0 auto;
}
This will add margin on each side of the element.
add margin: auto
.myClass {
background-image:url(http://www.funklix.in/wp-content/uploads/2014/07/Clip-art-free-1.gif);
height:250px;
width:250px;
margin: auto;
}
I'd like to center my copyright and also the logo (Windows Logo). How can I center these on the page using CSS. I thought I had the correct CSS, but it's still showing on the left.
Check out my jsfiddle.
Jsfiddle: http://jsfiddle.net/huskydawgs/z9j9rsz2/27/
Here's my code:
<div class="topbar">
<div id="logo">
<img src="http://fc01.deviantart.net/fs71/f/2012/048/4/0/microsoft_windows_8_logo_by_pooterman-d4q0ub4.png" />
</div>
Copyright © 2014 Microsoft
Here's my css:
.topbar {
width: 100%;
background: #f66511;
height: 34px;
line-height: 1;
}
.copyright{
color:#232323;
font-size:11px;
margin: 0 auto;
position: absolute;
top: 18px;
text-align: center;
}
For the copyright just add width:100%;. You need this because you've set the element to be absolute, so you have to define the width if you want the text alignment attribute to work.
For the image just add another text-align attribute:
#logo {
text-align:center;
}
First, get rid of position: absolute, if you want the copyright notice in the top bar, then nest it in the appropriate parent element. you'll want to nest it in 'topbar'.
I've messed with your jsFiddle to include the correct behavior.
Basically, removing the absolute positioning and specifying the topBar to have a text-align: center property will center all child text elements, in this case, your copyright.
For the image I just made it display: block and gave it a margin of margin: 0 auto; which centers the image within its parent container.
You cannot have automatic margins with an absolute position.
If you are trying to position your copyright, you should actually use a top margin.
It could look something like this:
.copyright{
color:#232323;
font-size:11px;
margin: 18px auto 0 auto;
position: relative;
text-align: center;
}
Hope this helps!
If you want to use the position:absolute for the .copyright then give the div a width of 100%. For the image, set it to display block and give it a margin: 0 auto.
#logo img {
display:block;
margin: 0 auto;
}
.copyright{
color:#232323;
font-size:11px;
margin: 0 auto;
position: absolute;
top: 18px;
text-align: center;
width:100%
}
Here is a an updated fiddle
No problem, just use translate and absolute positioning:
img{
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
What's happening here is that your image starts halfway into the screen (left: 50%). The trouble is that then the image is too far right, so you translate it back 50% (which refers to the width of the element).
You can use this to center on the vertical axis as well, with top: 50% and translate(x, -50%)
This codepen has more than you need, but you can see the translation at work in .loading.
I corrected your DOM implementation and CSS.
here is the JSFiddle
http://jsfiddle.net/z9j9rsz2/43/1
CSS
.topbar {
width: 100%;
background: #f66511;
height: 34px;
text-align: center;
}
.copyright{
color:#232323;
font-size:11px;
line-height: 32px;
}
#logo {
margin: 0px auto;
display: block;
}
HTML
<div class="topbar">
<span class="copyright">Copyright © 2014 Microsoft</span>
</div>
<img src="http://fc01.deviantart.net/fs71/f/2012/048/4/0/microsoft_windows_8_logo_by_pooterman-d4q0ub4.png" id="logo" />
Yes, there are other questions on this; but I'm not able to make this div center by following their instructions. Why?
HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div>
<div class="center"></div>
</div>
</body>
</html>
CSS:
body {
line-height: 1;
}
.center {
position: fixed;
display: block;
margin-left: auto;
margin-right: auto;
width: 300px;
}
Change the position:fixed; to position:relative;
The position: fixed makes the div position itself absolutely (and fixed, making it stay where it is when you scroll). This means that auto-margin won’t work. You can either fix this by removing the position rule, or by positioning the div absolutely instead:
.center {
position: fixed;
width: 300px;
left: 50%;
margin-left: -150px;
}
On an unrelated note, the additional div is completely useless, you can just leave that out. Also, divs are block elements by default, so you can leave out the display: block; rule as well.
Remove the position: fixed from the divs style.
Also, you don't need the display: block... it should default to that anyway. And poke is correct, you shouldn't need that extra div.
Here's an example of it working...
http://jsfiddle.net/VYmw6/1/
Your div won't get centered because you've got position:fixed, if you remove that it will work. :)
See JSfiddle here: http://jsfiddle.net/6XWMR/
is there any reason why you used position: fixed? but the anyway hope this help you
css:
.center {
margin: 0 auto;
width: 300px;
}
Demo
Use it !
.center {
margin-left: auto;
margin-right: auto;
width: 300px;
}
or
.center {
margin:0 auto;
width: 300px;
}
Here is Fiddle !!
Change your code to
<center>
<div>
content
</div>
</center>
Basically, enclose the div which you want to centered inside the tag.
Hope this helps and all the best with your project :-)
I have this css:
#manipulate
{
position:absolute;
width:300px;
height:300px;
background:#063;
bottom:0px;
right:25%;
}
I have this html:
<div id="manipulate" align="center">
</div>
How do we position that div at the bottom center of the screen?!?
If you aren't comfortable with using negative margins, check this out.
HTML -
<div>
Your Text
</div>
CSS -
div {
position: fixed;
left: 50%;
bottom: 20px;
transform: translate(-50%, -50%);
margin: 0 auto;
}
Especially useful when you don't know the width of the div.
align="center" has no effect.
Since you have position:absolute, I would recommend positioning it 50% from the left and then subtracting half of its width from its left margin.
#manipulate {
position:absolute;
width:300px;
height:300px;
background:#063;
bottom:0px;
right:25%;
left:50%;
margin-left:-150px;
}
Use negative margins:
#manipulate
{
position:absolute;
width:300px;
height:300px;
margin-left:-150px;
background:#063;
bottom:0px;
left:50%;
}
The key here is the width, left and margin-left properties.
Here is a solution with two divs:
HTML:
<div id="footer">
<div id="center">
Text here
</div>
</div>
CSS:
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
#center {
width: 500px;
margin: 0 auto;
}
Using a Flexbox worked for me:
#manipulate {
position: absolute;
width: 100%;
display: flex;
justify-content: center; // Centers the item
bottom: 10px; // Moves it up a little from the bottom
}
You can center it using negative margins BUT please note that it'll center exactly on the center of the screen IF any containing div is NOT SET to position:relative;
For example. http://jsfiddle.net/aWNCm/
So, best way to exactly center this div is to set correct properties position properties for its containing divs too otherwise it will be lost in some random ways.
100% working single line (Inline CSS Solve)
<div style="position: fixed; bottom: 10px; width: 100%; text-align: center;">Your Content Here</div>
100% working single line (Inline CSS Solve)
<div style="padding: 20px; width: 100%; text-align: center;">Your Content Here</div>
I have 2 images that I need to slightly overlap. My first image is logo.png, and my second image is form.png
My html is:
<body id="wrapper">
<div id="main" method="post" action="">
<img src="images/logo.png" align="middle" id="Smarty" />
</div>
<div id="box" method="post" action="">
<img id="Form" src="images/form.png" />
</div>
And my CSS is:
#wrapper #main {
margin-top: 8%;
margin-right: auto;
margin-left: auto;
text-align:center;
display:block;
z-index: 1;}
#wrapper #box{
margin-top: 8%;
margin-right: auto;
margin-left: auto;
position: relative;
text-align:center;
top: 8%;
display:block;
z-index: -1;}
Basically I need both images to be centered relative to screen size, and I need the 2 to overlap. With this code, both images center, but my form seems to be 8% down from my logo, rather than 8% down from the top of the screen. Is this how I am supposed to be overlapping the 2, or am I way off?
Thanks!
How about something like this?
Live Demo
Or using position: absolute, if that's what you want:
Live Demo
CSS:
#main {
margin: 8% auto 0 auto;
text-align:center;
/*
only include this next rule
if you want the first image to be over the second
*/
position: relative
}
#box {
text-align: center;
margin: -12px 0 0 0;
padding: 0
}
HTML:
<div id="main" method="post" action="">
<img src="http://dummyimage.com/200x80/f0f/fff" align="middle" id="Smarty" />
</div>
<form id="box" method="post" action="">
<img id="Form" src="http://dummyimage.com/200x40/f90/fff" />
</form>
Use the following CSS code to do it. The 2 images will overlap each other and will be centered to the screen both horizontally and vertically.
#main, #box{
position:absolute;
left:50%;
top:50%;
margin-left:-150px; /* negative half the width of the image */
margin-top:-150px; /* negative half the height of the image */
}
Check working example at http://jsfiddle.net/gVQc3/1/
If you want the images to overlap each other by certain amount of pixels, then see the following link.
Check working example at http://jsfiddle.net/gVQc3/2/
for the #wrapper #box change the position: relative; to position: absolute;. This should fix the issue
As far as I can see, you’re not doing anything that would make the images overlap each other.
For that to happen, you’d need to apply position: absolute; to them, and position them at the top of the page:
#wrapper #main,
#wrapper #box {
position: absolute;
top: 0;
}
To horizontally center them when positioned absolutely, I think you’ll need to know their width. If they were both 100 pixels wide, you’d need:
#wrapper #main,
#wrapper #box {
position: absolute;
top: 0;
left: 50%;
margin-left: -50px;
}
I wouldn’t recommend a z-index of -1 either, I don‘t think that makes sense. If you want #main to be on top, then I’d suggest:
#wrapper #main {
z-index: 2;
}
#wrapper #box {
z-index: 1;
}
Note also that in your HTML, you’ve got method and action attributes on <div>s. These won’t have any effect: those attributes go on the <form> tag.
You should play around with fixed, static and absolute positions instead of relative.
See this link http://www.w3schools.com/Css/pr_class_position.asp