I have the following CSS:
html, body {
background-color:black;
font-family:"arial bold";
overflow:auto;
text-align: center;
}
div#content {
width:792px;
height:100%;
padding:0px;
}
div#header {
height:216px;
width:100%;
}
The HTML code I have is:
<html>
<head>
<title>
Think in a NEW BOX.
</title>
<link rel="stylesheet" type="text/css" href="styles/default.css" />
</head>
<body onload="">
<div id="content">
<div id="header">
<img src="images/title-1.png" /><img src="images/title-2a.png" /><img src="images/title-3.png" />
</div>
</div>
</body>
</html>
Now, this works great in IE. The div centers perfectly (header). In Google Chrome, however, the div is left aligned. Am I missing something?
I had this 'problem' too today. Solved it with using display: inline-block;. Working browsers won't change and if it's already working, this won't mix up IE old.
You are missing:
A doctype (so IE is emulating bugs from the IE 4/5 days to cope with awful, ancient webpages)
That a div element is a block element so text-align does not influence it
auto left and right margins on the div.
See Centring using CSS for a longer explanation with diagrams
Even better solution is to center the block like this:
#content
{
margin:0px auto;
}
This method is used by... well, just about everyone (including SO).
Use
#content {
margin-left: auto;
margin-right: auto;
width: 100px; /* Your width */
}
to center your div. It allows your div to choose a variable margin for left and right, that results in a centered div. This should work for all browser.
Make sure you have a fixed width and use margin: 0 auto;.
Related
I use center tag, but it seems that is not standard in HTML 5. I tried to use CSS instead but it doesn't work for me! I expect in this example the div tag be displayed in center but it won't.
<!doctype html>
<html>
<body style="text-align:center">
<div style="width:100px; height:30px; background-color:rgb(0,0,0)"></div>
</body>
</html>
And this is center tag version: (it works)
<!doctype html>
<html>
<body>
<center>
<div style="width:100px; height:30px; background-color:rgb(0,0,0)"></div>
</center>
</body>
</html>
You can use margin: auto for your div
div {
margin: auto;
width:100px;
height:30px;
background-color:rgb(0,0,0)
}
Also it's better to give your div an id or class name to target it more accurately if your HTML markup become more complex as well as using external CSS instead of inline styles like what you're doing now.
Fiddle Demo
You can use css:
.window{
position:absolute;
top:50%;
left:50%;
margin-top:-140px;
margin-left:-200px;
width:400px;
height:280px;
}
make sure you substract half of the width and height using margins. This way your div will be centered within the window the div is in.
The div tag which you want to put in center in your body must be :
.div-class {
margin: auto;
}
If you use margin top or bottom, you can do this way:
.div-class {
margin-left: auto;
margin-right: auto;
}
I'm trying to center a pdf file in the middle of my web page, but it's not letting me set the margin's to 0 auto, like it does for normal content.
I can achieve this with absolute positioning, but why is the normal margin property not working?
<html>
<style>
#ob{
width:800px;
height:800px;
}
#wrapper{
margin:0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
<object id="ob" class="pdf" data="my_pdf_file.pdf" type="application/pdf">
Your browser does not support PDFs
</object>
</div>
</body>
</html>
Whatever you are trying to center using the margin technique needs to have a width defined.
Try setting a width for the wrapper, or simply apply the margin:0 px to #ob
Give the wrapper a width, thats why its not centering i doesont know what to be compared in the center
#wrapper{
margin:0 auto;
width: 800px;
}
Use
text-align:center;
Here's a jsFiddle example.
You're centering the wrapper, which will be 100% width, so already centered. Move the margin code to the object and try again.
Just replace your style tag to this one and it will solved your problem, for details please look into the comments that I wrote inside the code.
<style>
#wrapper{
width: 800px; // It will set the width of the wraper
margin: 0 auto; // It will help the wrapper div to be centered of the document.
}
#ob{
width: 100%; // It will be streched upto the wrapper fixed width which is 800px
height: 800px;
}
</style>
try this:
<div id="wrapper">
<center>
<object id="ob" class="pdf" data="my_pdf_file.pdf" type="application/pdf">
Your browser does not support PDFs
</object>
</center>
</div>
This seems incredibly simple but I have no idea why I can't put a div tag inside of a container div tag as it will not show up in Firefox or Chrome properly, but it works in IE6...??? Code is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
</div>
</body>
</html>
CSS: style.css
body {
background:white;
font-family: sans-serif;
}
#container {
margin:0 auto;
width:960px;
background:#e3e3e3;
border:1px solid black;
}
#nav {
padding:10px;
margin-top:10px;
float:left;
width: 400px;
height:100px;
background:white;
border:1 px solid black;
}
It's as if the container is not expanding with the DIV tag inside of it..what gives?
This is a common issue people face with CSS. Whenever you float something, it's parent collapses as you are seeing. You can work around it in the following ways:
set an explicit height on the container
put overflow:hidden or overflow:auto on the container
use the clearfix hack: http://nicolasgallagher.com/micro-clearfix-hack/
I find #2 to be the easiest and best in most cases. Use #3 when overflow:hidden/auto has an undesirable side effect.
It is because the #nav div is floated left. Floated elements are just that--floating, and have no height unless something anchors the box below it by clearing the floats.
.clear { clear: both }
and add a div below the floating div to clear it.
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
<div class="clear"></div>
</div>
See this SO question for a very detailed answer on clearfixes: What methods of ‘clearfix’ can I use?
Do overflow: hidden for #container.
This is one known limitation of floating.
Before: http://jsfiddle.net/N669N/
After: http://jsfiddle.net/N669N/1/
How do I align a <div> which contains an image (or flash) vertically with CSS. Height and width are dynamic.
This is a pure CSS2 solution for horizontally and vertically centering without known sizes of either container nor child. No hacks are involved. I discovered it for this answer and I also demonstrated it in this answer.
The solution is based on vertical-align: middle in conjunction with line-height: 0, which parent has a fixed line-height.
The HTML:
<span id="center">
<span id="wrap">
<img src="http://lorempixum.com/300/250/abstract" alt="" />
</span>
</span>
And the CSS:
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#center {
position: relative;
display: block;
top: 50%;
margin-top: -1000px;
height: 2000px;
text-align: center;
line-height: 2000px;
}
#wrap {
line-height: 0;
}
#wrap img {
vertical-align: middle;
}
Tested on Win7 in IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.
The only caveat is IE7, for which the two innermost elements have to declared at one line, as demonstrated in this fiddle:
<span id="center">
<span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>
Note that the span's are also required for IE7. In every other browser, the span's may be div's.
You can do this by using inline-blocks, one with height: 100% (and same heights for HTML and BODY) and vertical-align: middle.
Example 1: http://jsfiddle.net/kizu/TQX9b/ (a lot of content, so it's full width)
Example 2: http://jsfiddle.net/kizu/TQX9b/2/ (an image with any size)
In this example I use spans, so It would work in IE without hacks, if you'd like to use divs, don't forget to add in Conditional Comments for IE .helper, .content { display: inline; zoom: 1; }, so inline-blocks would work for block elements.
In addition to the other answers here, the CSS3 flexible box model will, amongst other things, allow you to achieve this.
You only need a single container element. Everything inside it will be laid out according to the flexible box model rules.
<div class="container">
<img src="/logo.png"/>
</div>
The CSS is pretty simple, actually:
.container {
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
I've omitted vendor-prefixed rules for brevity.
Here's a demo in which the img is always in the centre of the page: http://jsfiddle.net/zn8bm/
Note that Flexbox is a fledgling specification, and is only currently implemented in Safari, Chrome and Firefox 4+.
I would recommend this solution by Bruno: http://www.brunildo.org/test/img_center.html
However, I ran into a problem w/ his solution w/r/t webkit. It appears that webkit was rendering a small space at the top of the div if the empty span was allowed to be there. So, for my solution I only add the empty span if I detect the browser to be IE (If someone figures out how to get rid of the space, let me know!) So, my solution ends up being:
HTML:
<div class="outerdiv">
<img src="..." />
</div>
CSS:
.outerdiv {
display: table-cell;
width: 200px;
height: 150px;
text-align: center;
vertical-align: middle;
}
.ie_vertical_align * {
vertical-align: middle;
}
.ie_vertical_align span {
display: inline-block;
height: 150px;
width: 0;
}
And if I detect the browser to be IE I add an empty span element before the img tag and a css style so it looks like:
<div class="outerdiv ie_vertical_align">
<span></span>
<img src="..." />
</div>
Here's a JSFiddle with this code.
Dušan Janovský, Czech web developer, has published a cross-browser solution for this some time ago. Read http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
If you don't care about IE7 and below, you don't have to use multiple nested divs. If you have a div that you want to align vertically, that div is within some container (even if the container is your <body>). Therefore, you can specify display: table-cell and vertical-align: middle on the container, and then your div will be vertically centered.
However, if you do care about IE7 and below, you will need an additional container to make it work (yes, via a hack).
Take a look at this fiddle. It displays correctly in IE6-9 and other major browsers. #container2 is present solely for IE7 and below, so if you don't care about them, you can remove it as well as the IE-specific conditional styles.
Set the image as background of the div and align it center
try the 50% padding trick:
<html>
<body style="width:50%; height: 50%;">
<div style="display:block; display:inline-block; layout-grid:line;
text-align:center; vertical-align:bottom;
padding: 50% 0 50% 0">test</div>
</body>
</html>
This is possible if you know the height of the image or flash object to be centered. You don't need to know the container's height/width, but you do need to know the contained height/width.
It's possible using float, clear and negative margins. Example: www.laurenackley.com homepage.
html
<div id='container'><!-- container can be BODY -->
<div id='vertical-center'> </div>
<div id='contained-with-known-height'>
<p>stuff</p>
</div>
</div>
css
#vertical-center{
height:50%;
width:1px;
float:left;
margin-bottom:-50px;/** 1/2 of inner div's known height **/
}
#contained-with-known-height{
height:100px;
clear:left;
margin:0 auto;/** horizontal center **/
width:700px;
text-align:left;
}
#container{/** or body **/
text-align:center;
/** width and height unknown **/
}
If you don't know the inner elements width/height. You are out of luck with <div>. BUT -- table cells (<td>) do support vertical-align:middle; If you can't get it done with the div stuff above, go with a table inside the container, and put the div you are centering inside a td with vertical-align middle.
i'm using css style like this
text-align:center;
its working in IE and doesn't work with Safari..
any suggestions.
thanks,
Centering textual content has as far as I know no specific browser/doctype issues. So it look like that you're trying to center something else than text. If you actually want to center a block element, give it a fixed width (in pixels) and apply margin: 0 auto; on it as well.
Here's an SSCCE
<!doctype html>
<html lang="en">
<head>
<title>SO question 1897444</title>
<style>
#center {
margin: 0 auto; /* top and bottom 0, left and right expanding. */
width: 300px; /* Required to have a reference point to center. */
border: 1px solid black; /* Not required, just presentational. */
}
</style>
</head>
<body>
<div id="center">Centered block element</div>
</body>
</html>
This however won't work in IE in quirks mode. Just ensure that you're using a strict doctype.
It depends on what you are trying to style. You are probably trying to center a block level element like a DIV or UL. In that case, you center using
div {
margin-left:auto;
margin-right:auto;
padding-left:<some fixed size>;
padding-right:<some fixed size>;
width:<some fixed size>;
}
Validating your html and css is the first step to figuring out any rendering issues (even in craptastic browsers like IE 6).
I got the point I made that code:
width: 190px;
padding-left:23px;
height: auto;
text-align: left;
line-height: 18px;
and its working right now
thanks for all trying to help me