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;
}
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.
I don't want to add CSS to my div element (e.g. <div style="text-align: center;">).
I only want to add CSS code to the button element.
<div>
<button>Button</button>
</div>
How can I center the button horizontally in this case?
button {
margin:0 auto;
display:block;
}
button {
margin: 0 auto;
display: block;
}
<div>
<button>Button</button>
</div>
You need display: block; margin: auto; on the <button>.
jsFiddle
Others have already mentioned the margin: 0 auto; method, but if you wanted an explanation, the browser splits up the available space in whatever container your element is in.
Also important to point out is you'll probably need to give your element a width, too, for this to work correctly.
So, overall:
button {
display:inline-block; //Typically a button wouldn't need its own line
margin:0 auto;
width: 200px; //or whatever
}
People frown upon the center tag, but for me it always works just the way I want it. Nevertheless, center is deprecated so I'll make an effort.
Now I see many people suggest the cryptic CSS margin: 0 auto; but I can't even get it to work (see fiddle here). Other people will go modify position or display, but that always breaks something else.
How can I center a span using css so that it behaves exactly like the center tag?
<div class="container">
<span class='btn btn-primary'>Click me!</span>
</div>
Span is an inline element, and the margin: 0 auto for centering only works on non-inline elements that have a width that is less than 100%.
One option is to set an alignment on the container, though this probably isn't what you want for this situation:
div.container { text-align: center }
http://jsfiddle.net/MgcDU/1270/
The other option is to change the display property of the span:
/* needs some extra specificity here to avoid the display being overwritten */
span.btn.btn-primary {
display: table;
margin: 0 auto;
}
Using display: table eliminates the need to hard code a specific width. It will shrink or grow as appropriate for its content.
http://jsfiddle.net/MgcDU/1271/
You can set .container { text-align:center; } so that everything inside div.container will be centered.
In general, there are two ways centering things.
To center inline elements (such as text, spans and images) inside their parents, set text-align: center; on the parent.
To center a block level element (such as header, div or paragraph), it must first have a specified width (width: 50%; for example). Then set the left and right margins to auto. Your example of margin: 0 auto; says that the top and bottom margin should be 0 (this doesn't matter for centering) ad that the left and right margins should be auto - they should be equal to each other.
The <center> element is really just a block-level element with text-align:center;. If you sent border: solid red 1px; on it, you can see that it's 100% wide, and that everything inside it is centered. If you change text-align to left, then its children are no longer centered. Example: http://jsfiddle.net/KatieK/MgcDU/1275/. Perhaps you should just consider your <div class="container"> with text-align:center; } to be equivalent to <center>.
You make the span block level, give it a width so margin:auto works
see this fiddle
.center {
display:block;
margin:auto auto;
width:150px; //all rules upto here are important the rest are styling
border:1px solid black;
padding:5px;
text-align:center;
}
UPDATE: In order to NOT specify a width and have natural width of element on the span you will have to use textalign on parent
see this fiddle
.container{text-align:center}
.center {
border:1px solid black;
padding:5px;
}
<span> is an inline element. <div> is a block element. That's why it is not centering.
<div class="container" style='float:left; width:100%; text-align:center;'>
<span class='btn btn-primary'>Click me!</span>
</div>
You can center the content of span only when you convert it into block, using 'inline-block' style.
Your parent element needs to have a larger width in order to let a child element be positioned within it. After that the trick with margin: 0 auto; is getting the parent and child container position and display values to be compatible with each other.
.container {
border: 2px dashed;
width: 100%;}
.btn {
display: block;
margin: 0 auto;
width: 25%;
}
http://jsfiddle.net/rgY4D/2/
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;}
<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/