Float: center doesn't work?

Question

I'm doing my first Tumblr theme using a tutorial, I'm a total newbie at this.

.metadata a {
display: inline-block;
float: center;
margin-left: 2%;
}

I want the posts to be centered, but the only things that work are float: left and float: right

What should I do ? Please explain clearly because as I said, I'm a total newbie, and I'm not a native English speaker.

Answer 1

You can only float left or right, so float is not an option here.

Add text-align: center to the parent element of the a-tag. That will center not only text, but also other inline and inline-block elements, like yours.

Another way to center element, is to give them display: block; margin 0 auto. The 'automatic' left and right margins cause the element to be centered. It's a common trick to center elements, but it works on block elements only (or elements with display: block). That also means that you have to specify a width, because if you don't, the block element will consume 100% of the parent width.

I think in your case, an explicit width isn't an option, so text-align will be the best option.

Answer 2

Sorry, but there is no float: center;. Use margin: 0 auto; to center block level elements and text-align: center; for inline.

Answer 3

Instead of using "float" to control the orientation of your text, you'd likely want to use "text-align" and apply it to the parent of your a tag. "text-align: center;" will apply to all inline elements (like a) within a parent. See text-align and float documentation/tutorials.