I want to center an object using CSS and no hacks, is this possible and how?
I have tried this, but than my p tag is gone.
.centered {
position: fixed;
if you don't need to be position:fixed; you can just use
<center>
Hello
</center>
This is deprecated in HTML5
There's several ways to center an element. But it depends on what your element is and how we choose to display it:
If you have {display:inline; }
This is simple. You can just use "text-align: center;" to center text, images and divs.
If you have {display:block;}
This is a bit more difficult. It depends on how your object is positioned. Your object could be relative, absolute, or fixed.
If it is relative; then you can use "margin:0 auto;"
, however you will require a width value.
If it is absolutely positioned, then you need to specify your "top:"
and "left:"
values. You'll also need a width. If you know the width of the element, the best way is to use {left:50%; margin-left:-X}
, where X = 1/2 the width of the element.
Use margin: auto
like this:
margin: 0px auto
Use this for general purposes. Even span or div which is inside whatever :
width:inherit; display:block;margin:0 auto;
Usage :
CSS Code :
#text-align
{
text-align:center
}
HTML Code :
<div id="text-align">Content goes here....</div>
http://www.techulator.com/resources/4299-center-Deprecated-tags-HTML.aspx
HTML:
<div>Centered</div>
CSS:
div {
margin: 0 auto;
width: 200px;
}
Live example: http://jsfiddle.net/v3WL5/
Note that margin: 0 auto;
will only have an effect if the div
has a width.