I would like to align my container div to center vertically just like it is aligning himself horizontally because of margin: auto;. I've searched some time on google on how to do that but it does not seem to be working for me. Maybe there is some kind of universal way to do that, as easy as margin: auto; method for horizontal centering? Because it seems for me very strange that we live in 2011 year and there is still no simple css command for doing this task...
#container
{
margin: auto;
width: 960px;
height: 640px;
background-color: brown;
}
There are tons of tutorials for vertical alignment, especially for IE, which needs special care. One of them: Vertically center content with CSS. Also another answer here.
Can it be even simpler...
html, body {
overflow:hidden
}
#container {
width:960px;
height:640px;
position:absolute;
top:50%;
left:50%;
margin-top:-320px;
margin-left:-480px;
background:brown
}
The overflow:hidden is to hide the scrollbar that appears (html for IE6 and body for IE5). I don't know why this happens.
But if you want to keep it scrollable if the browser window is smaller, just make the height 639px and remove the overflow:hidden.
If your div has a fixed height, you can align it vertically by adding another div (with a float) with a negative margin (half the height of the main div) and then alter your div's CSS (adding the clear).
Also don't forget to specify the 100% height of the html and body, without that it doesn't work.
Like this:
CSS:
html {
overflow: auto;
}
html, body {
margin:0;
padding:0;
height:100%;
}
#alignDiv {
float:left;
height:50%;
margin-bottom:-320px; /* half the centered div */
width:1px;
}
#container
{
margin: 0 auto;
width: 960px;
height: 640px;
background-color: brown;
clear:left; /* without the clear it won't center */
}
html:
<div id="alignDiv"></div>
<div id="container"></div>
Related
I have been trying to set a text to center of a screen. so i placed a div with some text inside the body directly with some text and added height to it as 50% and margin-top as 50%. I thought it would hold the div's top position always at 50%. But i am wrong.
HTML:
<div id="test">test.. !</div>
CSS:
html, body {
width:100%;
height:100%;
margin:0;
}
div {
margin-top:50%;
text-align:center;
width:100%;
height:50%;
}
Do you have any ideas on why it is misbehaving? Please do not suggest any new ideas. I know other ideas for centering it. But I wonder why this snippet is not working.
DEMO
This is primarily a question of "50% in relation to what?"
Setting the height of the div to 50% makes the height 50% of its container, in this case the body element.
Setting the margin-top to 50% then puts a top margin to half the width of the div.
Please see this question on SO for clarification: Why are margin/padding percentages in CSS always calculated against width?
Additionally, the top margin is applied between the parent and the top edge of the div, not the vertical centre.
All these factors play a role in the resulting div not being centered in its container.
Try This
html, body {
width:100%;
height:100%;
margin:0;
}
div {
width:100%;
height:50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align:center;
border:1px solid black;
}
DEMO-JSFiddle
I have the following example: http://jsfiddle.net/4EpRv/
and another here: http://jsfiddle.net/4EpRv/1/
Both show two images (one taller than wide, and the other wider than tall). The code SHOULD be making the images align in the middle (horizontal and vertically) and fill the space of the screen until the image hits its maximum width or height and should have 72px of padding around them (at a minimum, depending on the image size and aspect ratio)
The first example works fine on all screen sizes, but the second example breaks on portrait screens as the image appears off-canvas at the bottom.
See screenshots for the second example: http://dev.driz.co.uk/gallery/ipad1.png (not working on portrait) and http://dev.driz.co.uk/gallery/ipad2.png (working on landscape).
And see screenshots for the first example (that work): http://dev.driz.co.uk/gallery/ipad2.png and http://dev.driz.co.uk/gallery/ipad3.png
The HTML is as follows:
<div class="gallery">
<div class="gallery-background">
<img src="http://dev.driz.co.uk/gallery/halo.jpg" />
</div>
</div>
and the CSS:
.gallery {
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
.gallery-background {
background: none repeat scroll 0 0 #333333;
bottom: 0;
left: 0;
padding: 72px;
position: fixed;
right: 0;
text-align: center;
top: 0;
}
.gallery-background:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.gallery-background img {
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
Any ideas why the second example breaks on portrait screens if the image is wider than taller?
And how I could fix this?
Update: Media Queries might be an option if I can apply a different rule if the screen is portrait and need to do something slightly different.
Update 2: The :before declaration is important, as it's what centers the image vertically, see here for an example without it: http://jsfiddle.net/4EpRv/2/ so removing that isn't an option, unless I can find an alternative. And here is proof that removing it causes the image to NOT be centered in the middle vertically: http://dev.driz.co.uk/gallery/NotWorking.png
Update 3: Using JavaScript has been the best solution so far, as by NOT using padding and instead positioning the element centrally I can handle all the issues: http://dev.driz.co.uk/gallery/2/landscape.php but can this be done in pure CSS?
I retyped the post with a solution to your problem. Hope it helps.
CSS
html{
width:100%;
height:100%;
margin:0;
}
body{
width:100%;
height:100%;
margin:0;
}
.gallery{
position:relative;
}
.gallery-background {
width:100%;
height:100%;
display:table-cell;
background-color:#333;
text-align:center;
vertical-align:middle;
padding:0;
margin:0;
border:0;
}
.gallery-background img {
display:block;
max-width:100%;
margin:0 auto;
max-height:100%;
}
JavaScript
$(function(){
$('.gallery-background').css('height',$('body').innerHeight())
$('.gallery-background').css('width',$('body').innerWidth())
window.onresize = function(event) {
$('.gallery-background').css('height',$('body').innerHeight())
$('.gallery-background').css('width',$('body').innerWidth())
}
})
HTML
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="gallery">
<div class="gallery-background">
<img src="http://dev.driz.co.uk/gallery/halo.jpg" />
</div>
</div>
I have added the solution on here. I believe it is almost impossible to do without some fixed height. I have added JavaScript in to assist you.
Edit: I have fixed the question you asked with the use of JavaScript also adjusts on window resize. http://jsfiddle.net/4EpRv/9/
Edit: Fixed Scrollbar http://jsfiddle.net/4EpRv/11/
Here is a PEN I created for a similar answer. There are 3 ways to vertically align your content. I think table-cell method or translate() method will suite you best.
There are similar questions on stack with some suggested answers (some don't work in IE7 like settings display:table), others don't have answers so I'm hoping someone can explain why browsers render the following HTML as they do and what the proper approach is.
You can see the working sample at the following fiddle: http://jsfiddle.net/wDeCg/1/
The HTML:
<div class="bottom-background-image">
<div class="site-width">asdfasdfasdf</div>
</div>
The CSS:
body {
background-color:beige;
margin: 0;
}
.bottom-background-image {
background-color:green;
}
.site-width {
margin: 0 auto;
width: 1024px;
}
Here's the unwanted result, which is that the parent DIV with a green background doesn't stretch the full width as expected. It seems to only take up the available screen width. Since the inner DIV is setting the width surely the outer DIV with no explicit width set should adopt the inner DIVs width? :
Similar questions:
DIV background not stretching properly
Stretch parent node to its content width
Define your css in you body min-width:1024px;
body{min-width: 1024px;}
Demo
try this
http://jsfiddle.net/wDeCg/3/
.bottom-background-image {
background-color:green;
min-width:1024px;
}
Try this:
body {
background-color:beige;
margin: 0;
width:100%;
}
.bottom-background-image {
background-color:green;
width:100%;
clear:both;
overflow:auto;
}
.site-width {
margin: 0 auto;
width: 1024px;
}
I have tried all sorts of things to try and get this working, I'm a little dated with html markup so please forgive me but i'm sure my problem can easily be solved. I have 2 divs (1 image logo and 1 flash object flame ) which I would like to center inside a container div which I would like to be centered with any browser screen resolution. I would also like the horizontal scroll bars to only appear when the browser window is below 800px wide hence the min-width:800px (this works ok) on the container div. my child divs keep appearing above and below each other and when I set them to absolute positioning the just appear to the left ontop of each other.....I just want everything to be aligned centrally and both divs at the top of the screen, can someone please help and point me in the right direction.
Thanks
Andy
.container {
margin-left: 0 auto;
margin-right: 0 auto;
min-width:800px;
width: 100%;
height: 500px;
background-color:#F00;
}
.logo {
margin: 0 auto;
position:absolute;
vertical-align:top;
display:inline-block;
width:1059px;
height:136px;
}
.flame {
margin: 0 auto;
vertical-align:top;
position:absolute;
display:inline-block;
width:861px;
height:134px;
}
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
margin:auto;
width:800px;
height: 500px;
background-color:#F00;
}
.logo {
margin:auto;
float:left;
width:450px;
height:136px;
background-color:#096;
}
.flame {
margin:auto;
float:left;
width:350px;
height:134px;
background-color:#099;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">LOGO GOES HERE</div>
<div class="flame">FLASH CONTENT GOES HERE</div>
</div>
</body>
</html>
Using floats, you can make your divs stack up next to each other. However, the sum of the widths of the divs must be less than or equal to the width of the container, otherwise the 2nd div will appear below the first div. Your container will also always be centered to the browser. Also, if the width of the browser is below 800px (width of the container), horizontal scroll bars will appear.
One last thing, this code centers the container but does not center your divs if the sum of the widths of the floated element are less than the width of the container.
You can go through this link to learn how to do that as well.
EDITED:
Alternately, if you know the sum of the widths of the logo and the flash banner, which I think you do, you can create a div with width equal to the sum and apply a margin:auto property to it. Involves use of an extra div and prior knowledge about the width of your logos and flash banners, but I think will suit your purpose.
Hope this helps. :)
.container {
margin-left: 0 auto;
margin-right: 0 auto;
min-width:800px;
width: 100%;
height: 500px;
background-color:#F00;
**position:relative;**
}
#media only screen and (max-width: 800px){
html{
overflow: auto;
overflow-y: hidden;
}
}
Final version
To sum it up - the task was basically this:
have two elements width different widths be aligned alongside in one row
this row should always be centered as kind of a header
only when the screen is smaller than 800px a horizontally scrollbar should appear
the non-visible edges are trimmed on the left and the right side
This is a possible solution:
Try before buy on jsfillde.net
And a little explanation:
HTML markup
<div class="wrapper">
<div class="center">
<img src="" alt="">
<object></object>
</div>
</div>
CSS
body, html {
width: 100%;
min-width: 800px;
height: 100%;
margin: 0;
padding: 0;
}
div.wrapper {
width: 100%;
height: 134px;
overflow: hidden;
}
div.center {
position: relative;
margin:0 auto;
width: 800px;
height: 100%;
}
div.center > img {
position: absolute;
top: 0;
left: -499px;
}
div.center > object {
position: absolute;
top: 0;
left: 560px;
}
On "How it works"
The first div wrapper spans an area from the left side to the right side. This is the space which is always visible. To cut off the edges I used overflow: hidden; on that element. So everything that sticks out will be invisible.
The second div center is placed in the middle of the viewport using margin: 0 auto. It has a fixed width. I used 800px because this was the desired min-width in the question. It will work with any other wide, too.
Now it's time to align the two header elements. Both have a fixed width. In this case the image is 1059px and the object is 861px, making it a total of 1920px. The middle of those elements would be obvious at 960px. Our container's center is actually at 400px, because the min-width of the page is 800px. So the actually meeting point of both elements is at 560px within this container, as we have a 160px shift. So for the object it's easy: simple set left: 560px;. But the left container must be placed, that it ends at this point. We had a width of 1059px and substract it from the 560px and get the final value of left: -499px;.
As the container in the middle is centered, both elements will be centered, too. And as the wrapper's overflow is hidden, both edges will be cut off at the end of the viewport. Without any scrollbars visible.
At the end, there's only one thing left: Set min-width:800px on the <body>-tag, so that the scrollbars get visible as soon, as the window is smaller than 800px.
First answer
position: absolute takes the element out of there parents flow, except you set the parents position explicitly:
.container {
position: relative;
}
This should do the trick, but it didn't test it with your markup.
I need to align a image to the center of the browser window, therefore i created the following css:
#charset "utf-8";
/* CSS Document */
html {
background-color:#CCCCCC;
}
body {
margin:0px 0px 0px 0px;
}
img {
position:absolute;
border:0px;
left:50%;
top:50%;
margin-left:-156px;
margin-top:-217px;
}
The problem is however that if you make the browser window very small, the image floats out to the top and the left. Instead it should be fixed in the top left corner, and then give the possibility to scroll to see the rest of the image.
View the problem here: ejlstrup.com
Try the following css:
img {
border: 0px;
margin: auto auto;
}
The problem will be with your negative margins, they are what is causing the image to be pushed to the left out of view. If you use margin: auto auto, it should center the image for you and you won't have to use absolute positioning with percentages.
Edit: Just tested my method and it didn't work as intended. What you can do then (if you don't mind using a div), is to wrap the image in a div. Make the div the size of the image, then the margin: auto auto; will work properly.
Edit2: Credits to Senthil for pointing out that if you set the image display property to block, you don't have to wrap the image in a div for it to center. However, auto isn't working for centering the div vertically, if it needs to be center you can use a percentage (although I'm not sure if this can cause problems with different resolutions).
img {
border: 0px;
margin: auto;
display: block;
}