I have always been wondering how other people get to align to the centre the main div container as the only way I manage so far is adding to the css file the following:
*{
padding:auto;
margin:auto;
text-align:centre;
}
I have seen other pages using: *{padding:0px;margin:0px} but I can't see where or what do they do to centralise the main container.
Could anybody explain how?
Code example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>This is the main container</title>
<style type="text/css">
*{
padding:auto;
margin:auto;
text-align:center;
}
</style>
</head>
<body>
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;">
<b>This is the main container.</b>
</div>
</body>
</html>
Could anybody explain how do they do it in the following page?
http://www.csszengarden.com/?cssfile=/179/179.css&page=4
Do not use the * selector as that will apply to all elements on the page. Suppose you have a structure like this:
...
<body>
<div id="content">
<b>This is the main container.</b>
</div>
</body>
</html>
You can then center the #content div using:
#content {
width: 400px;
margin: 0 auto;
background-color: #66ffff;
}
Don't know what you've seen elsewhere but this is the way to go. The * { margin: 0; padding: 0; } snippet you've seen is for resetting browser's default definitions for all browsers to make your site behave similarly on all browsers, this has nothing to do with centering the main container.
Most browsers apply a default margin and padding to some elements which usually isn't consistent with other browsers' implementations. This is why it is often considered smart to use this kind of 'resetting'. The reset snippet you presented is the most simplest of reset stylesheets, you can read more about the subject here:
http://meyerweb.com/eric/tools/css/reset/
The basic principle of centering a page is to have a body CSS and main_container CSS. It should look something like this:
body {
margin: 0;
padding: 0;
text-align: center;
}
#main_container {
margin: 0 auto;
text-align: left;
}
You can text-align: center the body to center the container. Then text-align: left the container to get all the text, etc. to align left.
I would omit the * { text-align:center } declaration, as it sets center alignment for all elements.
Usually with a fixed width container margin: 0 auto should be enough
Related
I would like to show a vertically centered loading spinner like one of these https://github.com/jlong/css-spinners in a web page. Follow the codepen.io link on that page to see them in motion.
How can I do this via CSS? Consider I am dealing with a Google App Engine application based on Python, Twitter Bootstrap and Polymer.
Let's assume you go with the "Plus" spinner. You can wrap this in a fixed position div that covers the whole page:
<div id="pluswrap">
<div class="plus">
Loading...
</div>
</div>
Since you might want to use different spinners at times, which have a different width, the CSS shouldn't hardcode the width. You can center an item vertically in a flexbox, and then use margin: 0 auto; on the item to be centered horizontally.
#pluswrap {
position: fixed;
width: 100%;
height:100%;
display: flex;
align-items: center;
top: 0;
}
.plus {
display: flex;
margin: 0 auto;
}
This way, you can even color the background, make it semi-transparent etc.
Here's a JSFiddle
I don't know anything about a google app engine I'm afraid but to centre an element that has a width and height is pretty easy.
I assume this is a fixed positioned element so just use top,right,left and bottom and then use margin:auto to center vertically and horizontally.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.spinner{
position:fixed;
z-index:99;/* make higher than whatever is on the page */
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
background:red;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
HTML
<div id="pluswrap">
<div class="plus">
Loading...
</div>
</div>
CSS
#pluswrap {
position: fixed;
width: 100%;
height:100%;
display: flex;
top: 0;
}
.plus {
margin: auto;
}
Only display:flex to parent and margin: auto will do the required thing.
Here is JS Fiddle
I'm working with divs and I managed to make the wrapper center by having this css:
.wrapper{
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
width:1100px;
height:100%;
}
then I have this inside that is floated left. It went inside but my problem is when it gets longer, it pass the wrapper div. The wrapper div should also adjust when the height of the div inside adjust but it's not working. When I also float the wrapper, it also adjusts but it doesn't go to the center anymore.
.inside_div{
float:left;
margin:5px;
width:400px;
height:100%;
}
What I tried to do is to float the wrapper div and use:
margin-left:200px;
to adjust it and to make it look that it's in the center. But I based it on my laptop's screen. It may not be centered on different screens with different sizes.
What I wanted to see is that the wrapper div will be centered in all screens and it will also adjust when the div inside adjusts too. I just don't know how to do it.I tried dfferent ways but still same result.
This is the html part:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="header">
<div class="logo">
</div>
<div class="menu">
</div>
</div>
<div class="wrapper">
<div class="inside_div">
</div>
<div class="inside_div2">
</div>
</div>
<div class="footer">
</div>
</body>
</html>
The inside_div2 is floated right.
Floated objects won't expand their parents. Your initial css height value is all that the parent container has to reference for its height. By the way, height:100% is generally not going to work for you and is rarely something you should include.
Without seeing exactly what you're trying to do, this would probably work fine. Although it depends a bit what you have inside the 'inside_div':
.wrapper {
margin: 0 auto;
width: 1100px;
text-align: left;
}
.inside_div {
display: inline-block;
margin: 5px;
width: 400px;
}
I assume you wanted it off to the left since you were floating it left. But if you just want it centered, you can either just remove your float value and use margin: 0 auto; or use the css above and change text-align to center.
EDIT: Ok, so had to recheck your stuff above. I think what you want is simply this:
.wrapper {
width: 1100px;
margin: 0 auto;
}
.inside_div {
width: 400px;
margin: 0 auto;
}
That'll center both of them, regardless of the size of the screen. You can add a height value to the inside_div if you need, but px values would be best, and if you have content in there is usually best just to let the content dictate the height without explicitly setting it.
Remove all height properties and add a "clearfix" class to your wrapper.
In your css, define ".clearfix" as :
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
That should do the trick for modern browsers. You should definitely Google "clearfix" to learn more about it.
I put the following at the beginning of my html, and it doesn't work. The point should be obvious, to set top and bottom margins to 25px and left and right to 75px. and also to indent the paragraphs. But nothing works, no matter what I do it doesn't even look like it's trying to run the code.
<style>
<!--
p {text-indent:10px;}
margin:25px 75px;
-->
</style>
<style>
p {
text-indent:10px;
margin:25px 75px;
}
</style>
Then ensure you have a <p> tag in your HTML to apply this to.
I would focus on completing some basic HTML/CSS tutorials before pushing on much further :)
The <style> should be inside <head> and it should look like this:
<head>
<style>
p {
text-indent: 10px;
margin: 25px 75px;
}
</style>
</head>
I have a div with a background-color, and a 3 pixel white border.
When I set the html element to direction:rtl and overflow-y: scroll, I get a pixel of the background to the right of the border - only in IE9:
I'm pasting my code here, because on JsFiddle I can't replicate the bug.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html {
overflow-y: scroll;
direction:rtl;
}
.main {
margin: 0 auto;
width: 960px;
}
.sld-menu-item {
height: 85px;
border: 3px solid #fff;
background-color: #d25188;
}
</style>
</head>
<body>
<div class="main" role="main">
<div class="sld-menu-item sld-menu-item-2">
</div>
</div>
</body>
Has anyone run into this problem, and/or can someone suggest a solution? I can't give up the scroll and rtl rules...
I was only able to fix it by setting overflow: hidden on containing element and doing a negative margin hack:
.main {
overflow: hidden;
}
.sld-menu-item {
margin-right: -1px;
}
You might also want to set width of sld-menu-item to 961px then. Can probably put this in an IE9 conditional statement. I hope there's a better way of solving this though.
I banged my head against the wall for several hours, at the end I solved it in a very strange way...
Change the width of .main to 961px, it seems that Microsoft does not know how to find the "middle" of an even range.
I've a page with a main scrollable div like this:
<html>
<head>
<style type="text/css">
#mydiv{
overflow: auto;
width: 300px;
}
</style>
</head>
<body>
<div id="mydiv">content</div>
</body>
</html>
How can I have a fixed margin (for example 30px) at the bottom of the page?
The div can have a small or big height (depending on the screen size), but the margin should be fixed.
Thanks in advice
You can create another div either inside your existing or outside depending on how you want your page to layout. Then apply this style to the div #myftr { margin: 30px; }
Something like this.
http://jsfiddle.net/rhoenig/XxuvE/
you can simply define the margin-bottom in your css like this :-
#mydiv{
overflow: auto;
width: 300px;
border:1px solid red;
margin-bottom:30px;
}
or see the demo :-http://jsfiddle.net/XxuvE/4/