<div id="wrapper" style="height:400px;width:400px;">
<div id="example">
Text
</div>
</div>
I'm looking for a way to get #example into the center (left, right, top, and bottom) of #wrapper.
I think there are multiple ways to achieve what you want. One would be:
#wrapper{
display:table-cell;
width:400px;
height:400px;
vertical-align:middle;
border:1px solid red;
}
#example{
width:200px;
margin:auto;
text-align:center;
background:blue;
}
Demo: http://jsfiddle.net/SsD4Q/3/
I hope that helped somehow!
Try giving #example margin: 0 auto;
The second property is the left/right margin. Auto should center it.
Edit: Sorry that this does not center vertically. I misunderstood. Please see http://www.jakpsatweb.cz/css/css-vertical-center-solution.html for vertical centering.
Vertical alignment is a tricky one unless your using tables.
I suggest you read this aritcle on centering elements.
http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
Aligning horizontally however is easy...
Assign a width and use margin:auto
#example {width:100px; margin: 0 auto;}
<div id="wrapper" style="height:400px;weight:400px;">
<div id="vertical" style="height: 50%; width: 100%; margin-top: -25px"></div>
<div id="example" style="margin: 0 auto; height: 50px">
Text
</div>
</div>
Set the margin-top minus half the height of the example div
I don't like the current proposed solutions... as they rely on either displaying as table-cells, or using static heights on #example and negative margins.
Here is my proposal, considering #wrapper has fixed height:
Set #wrapper's line-height equal to its height;
Set #wrapper's text-align to center and vertical-align to center;
Set #example's display to inline-block, so it is centered vertically and horizontally but still works as a block;
Make #example a span instead, so IE8- allows it to be inline-block.
http://jsfiddle.net/aneves_sw/yse9w/
Related
I'm at a complete loss here. I've tried everything. Different displays, positions, floats... Nothing seems to work:
Markup:
<div id="today-leads" class="total-wrap">
<h2>Leads</h2>
<div id="leads-wrap">
<div id="leads-total" class="total">224</div>
<div id="leads-ticker-wrap"> <i class="icon-caret-up"></i>
<div id="leads-percentage-change" class="higher">56%</div>
</div>
</div>
CSS:
h2 {
text-align:center;
}
#leads-wrap{
display:inline-block;
margin: 0 auto;
}
#leads-ticker-wrap{
float:left;
}
#leads-total{
float:left;
}
Here's the jsfiddle
Which div?
leads-wrap won't centre because it is an inline-block not a block, so it is influenced by the text-align property of its containing block.
leads-ticker-wrap and leads-total won't centre because (a) they are floating left and (b) you haven't set auto margins on them.
Auto left/right margins only work when the element in question has a known width. So add something like
#leads-wrap
{
width: 65%;
}
Obviously you adjust the actual width to whatever you need.
CODE:
*{
margin:0px;
padding:0px;
}
body{
font-family:sans-serif;
width:1024px;
height:700px;
border:1px solid green;
//margin:0 auto;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
}
1.i expected a centered box from all sides , but top part of the box model is at beginning of body, if i explicitly set margin-top:20px, boxmodel is moved down, but why top part doesnt align automatically like others.
2.i also didnt get what auto value "DOES" to achieve centering
in case of margin:0 auto; // what is the unit of 0?px,em or pt.
Vertical alignment in Css is such a fun and painful topic. This stackoverflow queston is the best concise explanation I have seen regarding why vertical alignment can be so painful
As to your 1st question, the reason you can't vertically align using margins is explained below in the quote.
... the nature of document flow and element height calculation algorithms make it impossible to use margins for centering an element vertically inside its parent. Whenever a vertical margin value is changed, it will trigger a parent element height re-calculation (reflow), which would in turn trigger a re-center of the original element... making it an infinite loop.
As to your 2nd question, margin auto achieves horizontal centering by calculating the width of the child container in relation to its parent's width. Then it does simple math to add an even amount of margin to the left and right of the child container, enforcing horizontal centering.
As for 2nd question Part B,
margin: auto is the same as the following:
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
where as margin: 0 auto is the equivalent to the following:
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
A solution to achieve vertical centering
There are some options that you can utilize however to achieve vertical alignment despite the limitations. The easiest is to leverage a table. With tables, one of the few strong points of them is that using the vertical-align property actually behaves as you would expect when enforced inside of a table. So you can do something like the following:
<body>
<table style="width: 100%; height: 100%">
<tr>
<td>
<div id="verticallyCenteredContent" style="vertical-align: middle">
OMG it's vertically aligned
</div>
<td>
<tr>
<table>
<body>
There are two other common methods that I demonstrated in this jsfiddle.
Useful article that demonstrates a number of scenarios and approaches for achieving vertical centering - Vertical Centering with Css
Cheers!
At first, use css to horizontal centering the "Div". After that is using javascript to centering vertical. See demo on jsfiddle
HTML:
<div class="center">Div content</div>
CSS:
.center {
font-family:sans-serif;
width:300px;
height:300px;
border:1px solid green;
margin: 0 auto;
text-align:center;
}
JS (JQuery):
$().ready(function () {
$(".center").css("margin-top", ($(window).height() - 300) / 2);
});
See demo on jsfiddle
Here is one more resource on CSS margin issue. http://techslate.net/looking-at-css-margins/
I have a form that I cannot center. I have tried many things including :
form{
display:inline-block;
text-align:center;
margin:auto;
}
the dang thing won't center though. help please?
URL: http://s1527.mtchs.org/wordpress/contact/
form {
width: 50%; /* adjust as needed */
margin: 0 auto;
}
Block-level elements are centred by setting the left and right margins to the same value - in general the easiest way to do this is to set them both to auto. text-align on the other hand, applies to inline elements inside the element you apply the style to.
See here for examples.
Playing around with margins should work. Set a top/bottom margin for your element and the rest auto and it should center it automatically.
margin: 100px auto 0 auto;
if you wanna use display: inline-block and text-align combination, then you have to put text-align in the parent element
example
<div style="position: relative; display: block; text-align: center">
<div style="display: inline-block">
</div>
OR
you can simply put width in the from css
form{
display:block;
margin:auto;
width:600px;
}
I'm trying to centre align an image using a div and a CSS class (the tag is wrapped in a div class="center" tag). What I'm using at the moment is working in Dreamweaver (when I go to design view) but not when I load the page up in Safari. Here is my code:
.center {
display:inline;
text-align:center;
-webkit-inline;
-webkit-center;
background-color:transparent;
}
Sorry for asking such a simple question, I'm completely new to HTML, my experience is in Objective-C.
text-align: center caused the content to be centered (within the container), and not the container itself being centered.
Since you use display: inline, the size of the container will be the same as its content, and the centering will not have the effect you're after.
Either, you use the margin: 0 auto to center the container (towards its parent container), OR you change display: inline to display: block.
Give text-align:center; to it's .center parent DIV. Write like this:
HTML
<div class="parent">
<div class="center"></div>
</div>
CSS
.parent{
text-align:center;
}
.center {
display:inline;
background-color:transparent;
}
You can use margin : 0 auto , to a vertical align , but if you want a vertical-horizontal align , you need a code like this:
.center{
width:200px;
height:200px;
margin-left:-100px;
margin-top:-200px;
position:absolute;
top :50%;
left:50%;
}
margin: 0 auto. Is what you're looking for. You'll need a width also.
div.center { margin:0 auto; width: 20%;background:orange;}
I have a page in which a header consists of three divs - one that's floated to the left, one that's floated to the right, and one that's in between them. I'd like for that central div to be centered, yet sadly float: center doesn't exist and I can't just float it to the left and add padding as it'd have to change depending on the window size.
Is there something simple I'm overlooking? Or how would I do such a thing?
Update:
In addition, I'd like to find a way of centering that middle div in the space between the divs in case that looks better.
If you have two floated divs, then you know the margins. The problem is that the float:right div should be put before the middle div. So basically you will have:
left-floated | right-floated | centered
Now, about the margins: usually you can just use margin:0 auto, right? The problem is that right now you know the values of the margins: floated divs! So you just need to use:
margin:0 right-floated-width 0 left-floated-width
That should work.
Years later edit
Meanwhile, a new toy is in town: flexbox. The support is fairly good (i.e. if you don't need to support lower than IE 10) and the ease of use is way over floats.
You can see a very good flexbox guide here. The example you need is right here.
Indeed, the important part is that the centered div come after the left and right divs in the markup. Check out this example, it uses margin-left: auto and margin-right: auto on the centered div, which causes it to be centered.
<html>
<head>
<style type="text/css">
#left
{
float: left;
border: solid 1px red;
}
#mid
{
margin-left: auto;
margin-right: auto;
border: solid 1px red;
}
#right
{
float: right;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="left">
left
</div>
<div id="right">
right
</div>
<div id="mid">
mid
</div>
</body>
</html>
Here's a JS Bin to test: http://jsbin.com/agewes/1/edit
Usually you can use flexbox instead of floats:
https://jsfiddle.net/h0zaf4Lp/
HTML:
<div class="container">
<div>left</div>
<div class="center">center</div>
<div>right</div>
</div>
CSS:
.container {
display: flex;
}
.center {
flex-grow: 1;
}
The element with the centered content needs to be specified after both floated elements. After that, simply set the middle element to text-align: center. The text in the centered element will squeeze in between the floats.
See here:
http://jsfiddle.net/calvintennant/wjjeR/
Try this (make sure to use better class names):
.left {
float:left;
width:200px;
}
.right{
float:right;
width:200px;
}
.center {
overflow:hidden;
zoom:1;
}
The center div will fit between the two floats.
If you want to create a gutter between that centered div and the two floats, then use margin on the floats, not on the center div.
Because of "zoom", the CSS will not validate, but that layout will work in IE 5.5 and 6.
Note that source order is important here: the two floats must come first, then your "centered" div.
In some cases, you have a limitation and cannot change the page markup by moving the middle div after the right-floated div. In that case, follow these instructions:
For container: position: relative
For middle div: position: absolute; left: [containerWidth - middle-width / 2]
I hope you got the idea.
A simple solution without having to change the order of the divs (sometimes we can not do this) could be an absolute positioning for the center div as follows:
.container {
position: relative;
}
.container div {
width: 200px;
background: red;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
https://jsfiddle.net/Helioz/nj548y0g/