I'm trying to align a div horizontally, but for some reason it's not working in IE... What am I doing wrong?
HTML
<body>
<div id="container">
<div id="header">
<img src="logo.png">
</div>
<div id="top-nav">
<ul class="menu">
<li class="first leaf menu-mlid-471">Home</li>
</ul>
</div>
</div>
</body>
CSS
body{
background-color: #fff;
margin: 0;
padding: 0;
}
ul.menu{
width: 500px;
margin: auto;
}
#header{
height: 150px;
}
For Firefox, Chrome, Safari,... no problem. It all comes exactly in the middle. But IE refuses to align it properly...
Do you have a doctype? Without it, IE reverts to Quirks Mode, which does not support margin: auto; centering.
Also, IE < 6 does not support margin: auto; centering at all (in case ancient IE browser compliance is particularly important you).
Use below CSS
.ie ul.menu{
width: 500px;
margin: auto;
display:block;
}
Try this .ie ul.menu{
width: 500px;
margin-left: auto;
margin-right:auto;
display:block;}
Actually, if you place a border around your menu div, you will see in IE that the DIV is aligned in the center, however, your ul content is not. Please pop this into your CSS and see what results you get:
ul.menu{
width: 500px;
margin: auto;
border:solid black thin;
text-align:center;
}
Should work in IE.
Related
I am trying to center some images (horizontally) which overflows their container divs.
The containers (and images, for that matter) have a height of 160px and I want to keep them with that height, even at smaller screen-sizes - but still keep the image horizontally centered.
I have tried margin: 0 auto; with no luck.
I came across an half-solution where it was suggested to use text-align: center; on the container div along with margin: 0 -100%; on the image itself. However this solution seems to only work with webkit based browsers.
In eg. Firefox the result is this:
HTML:
<div class="row-fluid">
<div class="span6">
<a>
<img src="image1.jpg">
</a>
</div>
<div class="span6">
<a>
<img src="image2.jpg">
</a>
</div>
</div>
CSS:
.span6{
height: 160px;
overflow: hidden;
text-align: center;
padding: 0;
}
.span6 img{
height: 160px;
width: auto;
margin: 0 -100%; /*Only works for webkit based browsers*/
}
Any ideas? Thank you in advance.
.
EDIT:
I found out that editing margin: 0 -100%; to margin: 0 -50%; did the trick (both in Chrome, Firefox, IE, etc). However I am going with Andrey's solution since it is more likely cleaner, I assume.
May be this will help
.span {
display: flex;
align-items: center;
justify-content: center;
}
<body>
<div style="width:800px; height:500px; margin:0 auto; background-color: blue" >
<div style="vertical-align:middle;"><img src="sl1.jpg" width="50%"></div>
</div>
</body>
This code is not working... how do I align the image vertically?
Vertical align middle works, but you will have to use table-cell on your parent element and inline-block on the child.
This solution is not going to work in IE6 & 7.
Yours is the safer way to go for those.
But since you tagged your question with CSS3 and HTML5 I was thinking you don't care.
Here is an example
Tested in:
FF3.5
FF4
Safari 5
Chrome 11 & 12
IE9
HTML
<div class="cn"><div class="inner">your content</div></div>
CSS
div.cn {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
div.inner {
display: inline-block;
width: 200px;
height: 200px;
text-align: left;
}
Google Chrome is really throwing a roadblock at me and I need some help.
I am setting up a menu and the text is wrapping when zooming out (<50%). I do not want to use white-space: nowrap and I cannot make my menu wider. Safari, Firefox, even IE - no problems however when zooming out with chrome it forces a word wrap. Any ideas. Please let me know if more html/css is needed, i tried to simplify things:
CSS:
#page{
display: block;
overflow:visible;
font:"Times New Roman", Times, serif;
text-align: center;
margin: auto;
width: 100%;
height: 1000px;
background:#956e41;
}
#header{
width:auto;
max-width:1105px;
margin:auto;
position: relative;
overflow:visible;
}
#mainPicture{
height:475px;
width: 1105px;
background-image:url(images/main.jpg);
background-repeat:no-repeat;
margin: auto;
position: absolute;
}
#headerFrame{
height:80px;
margin: auto;
width: 1080px;
background-color: #a15535;
position: relative;
}
#logo{
height: 150px;
width: 340px;
margin: auto;
background-image:url(images/logo.png);
float: left;
}
#menuFrame{
width:auto;
max-width: 740px;
margin: auto;
width: 1080px;
display:inline-block;
}
#menu{
width:auto;
font-size:16px;
font-weight:600;
margin: 0 0 0 0 ;
text-align:right;
display:inline-block;
}
#menu ul{
margin-left: 80px;
}
#menu ul li{
list-style:none;
float:left;
margin: 0 0 0 10px;
padding: 0 10px 10px 0;
}
HTML:
<div id="page">
<div id="header">
<div id="mainPicture"></div>
<div id="headerFrame" class="borderSq">
<div id="logo">
<!--<img src="images/logo.png" />-->
</div>
<div id="menuFrame">
<div id="menu">
<ul>
<li class="border li">menu1<br /><span>text</span></li>
<li class="border li">THE menu1<br /><span>text</span></li>
<li class="border li">menu1<br /><span>text</span></li>
<li class="li">menu1<br /><span>text</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
Some of the CSS may look redundant, i lost my cool and started just throwing stuff at it... never good.
Demo: http://jsfiddle.net/X48ng/
^Open with chrome and zoom out.... you'll see (scroll right too for text)
John
Ok I think i see exactly what is causing it but its a bit of a fiddle with what you want from this,
After messing with the fiddle a bit I managed to stop the menu items being pushed to a new line when zooming out to 33% by removing the margin-left on the #menu ul{} item,
As shown here:
js Fiddle (still happens when zoomed out to 25% but now can zoom out to 33% instead of just 50%)
The only thing I can think of that is causing this is; as the page is resized the margin is being enlarged or something along those lines,
if anyone can help improve this answer, please do.
steve.
I am trying to get a centered in the space that is left empty by a sidebar. This is how I'd like it to look like:
I actually managed to make this work OK for most browsers using margin: auto for the div in question, while setting overflow: hidden:
Fiddle here
CSS
#header {
height: 50px;
background: #224444;
color: #fff;
}
#container div {
padding: 1em;
}
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
}
#sidebar {
float: right;
width: 200px;
background: #aaa;
height: 300px;
}
HTML
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
Centered Content
(Works everywhere but on IE9)
</div>
</div>
However, it does not work with IE9. It is strange as IE8 works OK!
I am running out of ideas, so I thought that maybe someone knows what is going on? The trick seems to work perfectly everywhere else.
NOTE: Please note that the content div should be flexible as it is in the demo. As the available space decreases, it should change size and squeeze in.
Isolate the centering from the floating
This affects IE9/10.
It works fine if the floated element is removed, or if width is used instead of max-width. The presence of floated content, combined with the use of margin:auto and max-width instead of width, appears to be confusing IE9+.
To fix this, put the centered content in a wrapper div, so that the centering of the content can be separated from the floating of the sidebar. In other words, too much is happening layout-wise in a single div, more than IE9+ can handle. So split up the #content div into two separate divs.
#header {
height: 50px;
padding: 1em;
background: #224444;
color: #fff;
}
#content-wrapper {
overflow: hidden;
}
#content {
max-width: 400px;
margin: auto;
padding: 1em;
background: #ddd;
height: 300px;
}
#sidebar {
float: right;
width: 200px;
padding: 1em;
background: #aaa;
height: 300px;
}
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content-wrapper">
<div id="content">
Centered Content
</div>
</div>
</div>
This tested fine in IE7/8/9/10. On a side note, because a wrapper div was added, the padding: 1em; now has to be added to each element individually.
IE is notorious for not working without proper doctypes.
Try adding the HTML5 one
<!DOCTYPE html>
Floats are a tricky business. Strictly speaking, they're only supposed to affect the inline content that flows around them, so margins acts like the floats aren't even there.
Try this instead:
#container {text-align:center}
#content {display:inline-block;text-align:left}
This should make the content box act like an inline element, and therefore appear centered in the space.
As far as I remeber I've always problems with margin:0 auto because I didn't specify width property.
So everytime you want use margin:auto you propably should write this:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:500px;
}
or in percentage:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:30%;
}
EDIT
If you want to create flexible layout please take a look to bootstrap and fluid grids.
I have two parts to my site. The main body and the sidebar. The body is 6in and sidebar will probably be 200px. How do i center my page? So there is equal space on the left and right side? It should center no matter the resolution.
Using XHTML 1.0 Strict. Should work on all major browsers or at least Firefox and chrome.
You can set margin to auto for left and right margins:
<div id="wrapper">
<div id="sidebar"></div>
<div id="main"></div>
</div>
#sidebar {
float:left;
width: 50px;
}
#main {
width: 150px;
float:left;
background-color: yellow;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 200px;
}
This is pretty portable too, even works on older IE versions.
Update wrapper, sidebar and main need to have widths. Google two column layout, that's a pretty standard way to do it.
http://jsfiddle.net/aXLVv/1/ - see it in action.
What about setting
margin: 0px auto;
to the outermost container.
<div id="wrapper">
<div id="side"></div>
<div id="main"></div>
</div>
#wrapper { margin: 0 auto; width: 800px; }
I dont think margin-left: auto; and margin-right: auto; will work. You need to have a global wrapper.
body {
margin-left: auto;
margin-right: auto;
}