Text align a floated object?

[jhl]

Is it possible to apply

text-align: center

to a floated object?

[Johnnyb]

Try it and find out!

But to answer your question; it won’t center the floated element no. It will just center the text within it.

[jhl]

I have tried it- it doesn’t work- I guess my question should have been how can you accomplish it. Im making a menu that needs lis to be floated left, but then I can’t center them with

text-align: center 

, they just end up on the left.

[mrapino]

I was having this issue yesterday/today, in fact. There are a few things you can do, and they all have slight issues.

first, you can do a horizontal menu without the float:left and use display:inline instead. This is a good solution only if you don’t mind not having your menu display in block format (display:block will allow you to have more control over the width and height of the menu links, so the whole area around the menu is linked and not just the text. If you use display:inline, text-align:center will work.

#menu{

text-align:center;

}



#menu ul li a{

display:inline;

}

The other option is to continue using display:block and float:left, but to wrap the menu in a div with the following code:

#menu{

display:table;

margin:0px auto;

}



#menu ul li a{

float:left;

}

The table div needs a width, otherwise it will extend 100% and won’t be able to be centered.

This method does not work in IE7, just so you are aware.

I hope this helps!

[jhl]

@mrapino thanks for the suggestion, but for some reason I can’t get it working for me. I’m making a dropdown nav, and the float:left makes the background color cut off and not extend the whole page. Maybe I’m just stupid, but I can’t get it to work. thanks though

[soap]

you need to clear fix it if your background color is getting cut off.

https://css-tricks.com/snippets/css/clear-fix/

[jhl]

I want to stop the bg color from extending past- thats why I need it

[soap]

That div you see there is floated right and has center-aligned text. I guess I don’t understand what your problem is.

Hello, world

It is possible that you have text-align:left somewhere else in your CSS which is taking precedence.

[jhl]

sorry, what I want is for the block to be centered but still floated left- don’t think its possible but thanks for the help. If you guys could show a dropdown menu that doesn’t require a float to be applied that would be great.

[richtestani]

Only if your element has a width can you center a floated element, but since it’s floated, you cannot center it traditionally. You have to position it.

div#my_float {

float: left;

position: relative;

width: 400px;

margin-left: 50%;

left: -200px;

text-align: center;

}

[jhl]

thanks @richestani, that did it!

[Author]

Posts