how to center an inline div using css?

Question

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)

You're not crazy, they seriously missed something in the CSS (2&3) spec on this one, when the `` tag was deprecated a style rule should have been added to replace it immediately. — Nick Craver, Sep 06 '10 at 21:31
Did anyone ever figure out how to do this or is CSS still broken? — ThatAintWorking, Oct 11 '12 at 20:54

score 21 · Answer 1 · edited May 23 '17 at 11:54

21

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:

How to horizontally center a floating element of a variable width?

edited May 23 '17 at 11:54

Community

1
1

answered Sep 06 '10 at 21:30

Moin Zaman

25,281
6
70
74

1

If the intent is to set it to `inline`...why use a `
`? It seems like this solution wouldn't work in 99% of cases, since you're completely changing the layout by doing this.
– Nick Craver Sep 06 '10 at 21:34
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 Sep 06 '10 at 21:37
@Nick: agree setting a block element to inline is a bit pointless, but that's what the Mihai seems to be asking. – Moin Zaman Sep 06 '10 at 21:38
@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 Sep 06 '10 at 21:40
I have something like this:
text
some longer text
some longer longer text
. 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 Sep 06 '10 at 21:43
@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 Sep 06 '10 at 21: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 Sep 06 '10 at 21:47
@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 Sep 06 '10 at 21:49
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 `
– Moin Zaman Sep 06 '10 at 21:51
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 Sep 06 '10 at 21:54
u can give each `
` a different class and use the different icons

Moin Zaman

Sep 06 '10 at 21:55

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 Sep 06 '10 at 21:58

score 12 · Answer 2 · edited Aug 29 '15 at 20:18

12

I solved this. You should add new div with text-align:center outside your divlike this

<div style="text-align:center;"> <div>

which not in center with inline display </div></div>

edited Aug 29 '15 at 20:18

DhruvJoshi

17,041
6
41
60

answered Aug 29 '15 at 14:38

katum

121
1
4

This solution worked for me when trying to center an iframe from Giphypress in Wordpress. Good stuff! – 9Deuce Mar 21 '17 at 02:22

score 7 · Answer 3 · answered Nov 19 '15 at 12:26

7

This is the easiest and most straightforward solution

.center {
  display: table;
  margin: auto;
}

answered Nov 19 '15 at 12:26

Guy Sopher

4,402
4
22
36

doesn't fit for more than one div - because if there will be multiple lines of divs, the second line will start to align from where previous was - if param float:left, then to left and a lot of space will be on the right side - It will be not centered. – Gediminas Šukys Aug 28 '19 at 10:20

score 2 · Answer 4 · answered Sep 06 '10 at 21:31

2

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;

answered Sep 06 '10 at 21:31

mkoistinen

7,724
3
41
56

2

because this approach only works for block elements. inline elements do not get a specified width. – Samia Ruponti Dec 27 '12 at 15:20
This works always, you need to block it. display:block;width:200px;margin:0 auto 0 auto; – Tamir Daniely Sep 07 '14 at 20:03

score 2 · Answer 5 · answered Sep 06 '10 at 21:46

2

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

answered Sep 06 '10 at 21:46

meder omuraliev

183,342
71
393
434

how to center an inline div using css?

5 Answers5

Linked

Related