ansaurus

Question

Answer 1

+2 A:

Give it a width less than that of its parent.

.parent    { }
.imgCenter { width:320px!important; margin:auto; }

<div class="parent">
  <img src="foobar.jpg" class="imgCenter" />
</div>

Jonathan Sampson 2009-07-30 15:52:18

The width is set inline.

Brandon Wang 2009-07-30 15:56:44

See my updated-answer for a working example.

Jonathan Sampson 2009-07-30 16:01:55

yup, you have to assign a width or no dice.

ethyreal 2009-07-30 16:04:55

I don't know the width of the child; it's set inline. This is a WordPress theme. The parent should be already defined, as it's the container the content of the posts are in.

Brandon Wang 2009-07-30 16:05:16

Brandon, you have to give the item you want centered an explicit width. That is how your margin:auto figures out what the margins should be.

Jonathan Sampson 2009-07-30 16:07:48

I am. All the solutions you are giving I already know. The width is inlined in the html (as in <div style="width: 200px"> because it changes).

Brandon Wang 2009-07-30 16:13:47

Add !important within your css.

Jonathan Sampson 2009-07-30 16:14:22

If 200px is less than the parent width, it doesn't matter.

Jonathan Sampson 2009-07-30 16:16:01

The width is set by the user through the WordPress write-post interface. I have no control over it. I just want it centered. I'm surprised there's no easy way to do this; I don't want to align=center things. I want to do it the CSS way. It's not working.

Brandon Wang 2009-07-30 16:30:10

If there is an explicit width given, margin:auto will handle the centering...unless the width is equal-to or greater than the parent-width.

Jonathan Sampson 2009-07-30 16:42:01

Then how come it won't work?

Brandon Wang 2009-07-30 16:51:14

I don't know. Post a link to your page and we can help.

Jonathan Sampson 2009-07-30 16:52:14

I can't. It's a WordPress theme, and I don't have the time to put up a test site yet.

Brandon Wang 2009-07-30 21:03:03

There; I've updated the example.

Brandon Wang 2009-07-30 21:06:03

Answer 2

A:

In general, to position a div in the center, the technique is to make both the left and right margins auto and then give the div a width:

.centerDiv
{
    margin-left:auto;
    margin-right:auto;
    width: XXX px;
}

desigeek 2009-07-30 16:08:02

I have to accept this because it's right, but I can't get it to work.

Brandon Wang 2009-08-30 21:43:13

Answer 3

A:

An easier solution might be to set margin-left: auto, margin-right: auto and text-align: center (for the caption text) on all child elements of your containing element:

.imagecenter *{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

This means you won't have to explicitly set the width of your containing element, but has the drawback that your caption text will have a 100% width, which might look wierd.

You 2009-07-30 18:26:57

ansaurus

tags:

views:

answers:

Center block element in element

related questions