Simple question :D
How can I center an inline div (not its content) using css?
VERY IMPORTANT: the width of the div is unknown (I can not specify it)
+3
A:
If by inline you mean, its CSS display property is set to inline then you can center it by giving the immediate parent container a text-align:center
If you mean a div within another div, you can follow this approach if you can add a wrapper and float both:
Moin Zaman
2010-09-06 21:30:59
If the intent is to set it to `inline`...why use a `<div>`? It seems like this solution wouldn't work in 99% of cases, since you're completely changing the layout by doing this.
Nick Craver
2010-09-06 21:34:17
its not working. if I set on the container text-align:center, my div's content get centered even if I overwrite on my div the text-align style.
Mihai Om
2010-09-06 21:37:16
@Nick: agree setting a block element to inline is a bit pointless, but that's what the Mihai seems to be asking.
Moin Zaman
2010-09-06 21:38:59
@Mihai: Check the specificity of your CSS for the div and its content. Make it more specific by using an ID or more selectors and the div's content should not be centered. If that doesn't work, use `text-align:left !important;`
Moin Zaman
2010-09-06 21:40:47
I have something like this: <div inline> <img1> text <br/> <img2> some longer text <br/> <img3> some longer longer text </div>. All i want is to center my div on the page with all the images one under another and the text on the right. The images are some small icons. I made the div inline only not to spread it across the whole width of the page :(
Mihai Om
2010-09-06 21:43:37
@Mihai: the code didn't come through in your last comment. use the '`' characters around your code or just add it to the question
Moin Zaman
2010-09-06 21:44:44
and the problem is the the contet is centered and the images at the beginning of the lines are not one under the other anymore
Mihai Om
2010-09-06 21:47:28
@Mihai: I think you need to rethink the markup and approach to layouting this with CSS. Can you post a screenshot of what you have now and what the desired result is?
Moin Zaman
2010-09-06 21:49:36
Also from what I understand, I think you are better off wrapping each icon / text in one container. In fact what you're describing sounds very much like a list. Have you looked at using a `<ul>` and using your image icons for the bullets?
Moin Zaman
2010-09-06 21:51:29
I'll try it as a list. But I have to put the image in list item because are different images. Thank you for your effort guys.
Mihai Om
2010-09-06 21:54:21
u can give each `<li>` a different class and use the different icons
Moin Zaman
2010-09-06 21:55:35
I know. But I hate using background-image on li when is more natural to use list-style-image on ul. And I have to wrap the icons as links, so there must go in the list item. Thank you again.
Mihai Om
2010-09-06 21:58:54
+1
A:
Wrap it into a div that you can specify the width of and then set the margins of the div in question to: margin: 0, auto;
mkoistinen
2010-09-06 21:31:35
A:
you can probably get away with display:inline-block and text-align:center; on the parent element if you want it it to be "blocky". also you'll probably need to give it a vertical-align:top
meder
2010-09-06 21:46:53