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/
Related
I have a nested div like this
<div class="myDiv">
<div class="myOtherDiv">
In my CSS I want myOtherDiv to have margin: 0 auto; but not myDiv
If I write
.myDiv{
margin: 0 auto;
}
It applies to both with the specificty of 0,1,0
But
.myDiv .myOtherDiv{
margin:0 auto;
}
Nothing happens. Which is weird, visual code reports the specificity of this to be 0,2,0 which is higher so should it not apply?
As you have not provided all of the CSS code it is hard to tell. However,
Issues with margin: 0 auto;
are you usually a result of the element not being a block element or contain a width.
Since div is a block element naturally, it takes up the entire width available even if you only have 1 letter inside that div(I.e <div>A</div>
You must declare a width before centering your div items.
So for example:
.myDiv {
width: 50%;
margin: 0 auto;
}
Im regards to specificity,
If the parent <div> doesn't have a width assigned margin:0 autowill not do anything. However, if you assign a width then the block will not occupy all the page's space, and then the block itself is centered, but the items of the child div will not be centered or affected.
If you assign both the child and parent div margin:0 auto without either having a set width it will produce a null effect without affecting positioning at all because each block is just taking up all the space possible within the page.
If you want the child div block centered, then assign a width to the child div, and leave the parent div alone. Since the parent occupies all the page's width space, the child div will be centered on the page using margin:0 auto; and the width you assigned.
.myDiv .myOtherDiv {} or just .myOtherDiv {} should be good to target myOtherDiv.
Did you give the div a width? Block level elements like div's default to 100% widht of their parent. So you need to set a specific smaller width, or use display: table; so the content decides the width. See below:
.myDiv{
background: blue;
}
.myOtherDiv{
margin: 0 auto;
display: table;
background: red;
}
<div class="myDiv">
<div class="myOtherDiv">content
</div>
</div>
I am a relative novice in the world of CSS so please excuse my ignorance! I am attempting to use the following CSS to align two divs horizontally:
.portrait {
position: relative;
display:inline-block;
width: 150px;
height: 200px;
padding: 20px 5px 20px 5px;
}
.portraitDetails {
position: relative;
display:inline-block;
width: 830px;
height: 200px;
padding: 20px 5px 20px 5px;
}
Unfortunately, unless I remove the display: inline-block from the .portrait class and replace it with float:left the .portraitDetails div block appears underneath the first div block. What on earth is going on?
Since you provided a working example, the problem seems to be more clear now.
What you have to do is simply remove display: inline-block and width: 830px properties from the right div. Of course remember to NOT add the float property to it.
People sometimes forget what is the purpose of the float property. In your case it is the image which should have float property and the image only. The right div will remain 100% wide by default while the image will float it from the left.
HINT: If the text from the div is long enough to float underneath the image and you want to keep it "indented" at the same point then add the margin to the div with a value equal to the image's width.
The problem with display: inline-block; is that the siblings having this property are always separated by a single white-space but only if there are any white-spaces between their opening and closing tags.
If the parent container has fixed width equal to the sum of the widths of these two divs, then they won't fit because this tiny white-space pushes the second div to the next line. You have to remove the white-space between the tags.
So, instead of that:
<div class="portrait">
...
</div>
<div class="portraitDetails">
...
</div>
you have to do that:
<div class="portrait">
...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
...
</div>
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 have two button bars- each contains links, but one also contains a submit button of a certain height. The one with the submit button has all the elements vertically centered. I want the other button bar, without the submit button, to look the same, so I gave it an explicit height. However, the links within it align to the top instead of in the middle.
What's going on here, and how can I make link bars that are of a consistent height, with vertically centered elements?
HTML:
<div class="link-bar">
<input type="submit" value="Save"/>
link
link
</div>
<div class="link-bar">
link
link
</div>
CSS:
input[type='submit'] {
width:100px;
height:40px;
border:solid red 1px;
}
.link-bar {
height:40px;
background:#EEE;
border:blue 1px solid;
margin:10px;
vertical-align: middle;
}
See jsFiddle for example
Simply add line-height equal to the height. By default, any text on that line will be vertically centered. The exception occurs if you wrap the text to a new line.
http://www.w3.org/wiki/CSS/Properties/line-height
I also removed your vertical-align as it's superfluous to content in block level elements. It only applies to inline elements.
.link-bar {
height: 40px;
background: #EEE;
border:blue 1px solid;
margin: 10px;
}
.link-bar a {
line-height: 40px; /* equal to the height of the container */
}
DEMO:
http://jsfiddle.net/SLqbk/9/
Use the line-height property.
.link-bar a {
line-height: 40px;
}
http://jsfiddle.net/SLqbk/7/
Add this to your css
.link-bar a {line-height: 40px; }
http://jsfiddle.net/xYVRj/
I gave #Sparky672 the answer because he correctly addressed my specific question and led me on the right path, but I want to share what I ended up doing, which I think is more effective overall:
Instead of explicitly setting the line-height of .link-bar a to try to match up to the container and button heights, I just set ALL the elements in the toolbar to the same line-height, and make them display:inline-bock. While the normal caveats of using inline-block apply (See here and here), the end result is consistent sizing and vertical centering for all the elements you throw in your toolbar, with less css to manage:
.link-bar * {
line-height: 30px;
display:inline-block;
/* Keep top-bottom padding of elements zeroed for consistent heights: */
padding-top:0; padding-bottom:0;
}
See the updated fiddle.
For me, one of the most useful features of tables is that their width adjust to its content.
You can very easily do things like:
<table align=center style="border: 1px solid black">
<tr><td style="padding: 20px">
some text here
</table>
If the content of that box is wider, the box will be wider. Very intuitive and it works on ALL browsers, period.
You can achive something similar for normal block elements by using the float CSS property, i.e. their width adjust to its content. But the element will not be centered.
So, the question: How can you center a block element and make that element to adjust its width to its content in a cross-browser manner?
The modern way is to specify display:table and the workaround for IE is having a parent element and text-align:center on a inline/inline-block:
<div id="for-ie">
<div id="el">whatup son</div>
</div>
<style>
#el {
display:table;
margin:0 auto;
}
/* for IE, throw this in a CC */
#for-ie { text-align:center; }
#el {
zoom:1;
display:inline;
}
</style>
Demo
Here's a quick tutorial I wrote on this subject: http://work.arounds.org/centering-block-level-element-variable-width/
I'll lengthen it when I'm not sleepy.
Quoting CSS: The Definitive Guide by Eric Meyer
If both margins are set to auto, as shown in the code below, then they are set to equal lengths, thus centering the element within its parent:
p {width: 100px; margin-left: auto; margin-right: auto;}
Setting both margins to equal lengths is the correct way to center elements, as opposed to using text-align. (text-align applies only to the inline content of a block-level element, so setting an element to have a text-align of center shouldn't center it.)
In practice, only browsers released after February 1999 correctly handle auto margin centering, and not all of them get it completely right. Those that do not handle auto margins correctly behave in inconsistent ways, but the safest bet is to assume that outdated browsers will reset both margins to zero.
However,
One of the more pernicious bugs in IE/Win up through IE6 is that it actually does treat text-align: center as if it were the element, and centers elements as well as text. This does not happen in standards mode in IE6 and later, but it persists in IE5.x and earlier.
If your intend is to display just some text at the middle of the page, you can use something like this:
<div style="text-align:center;">
<div style="background:red;display:inline;">
Hello World!
</div>
</div>
The first block will align contents to the middle. The second will fill the height equal to its contents, since display:inline will force the <div/> block to behavior like a <span/>, ie. adjust its width to content, and not to the remaining space.
Note this is limited to single line text only (like "some text here").
Use this CSS
#content {
position: absolute;
width: 150px;
margin-left: -75px;
left: 50%;
border: 1px solid #000;
text-align: center;
padding: 20px;
}
and this html
<div id="content">
some text here
</div>
Good golly, miss Molly! These answers are really overcomplicated.
CSS:
div.centered {
width:100%;
margin:0 auto;
text-align:center;
}
div.centered span {
padding:20px;
border:1px solid #000;
}
And then use this in your body:
<div class="centered"><span>Hello world!</span></div>