Geek Answers Handbook

Element of the central block in the element

I am trying to center a block element (WordPress title field, including image), but it will not work. I tried:

.imagecenter { margin-left: auto; margin-right: auto; display: block; }

But that just won't work. I also tried margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto; but that won't work either. Is there something I'm doing wrong? This is what the W3C documentation says I should do.

It looks like this in HTML (specify):

 <div id="content"> ........post here...... <div class="wpcaption imagecenter" style="width:225px"> <img src="blah" /> Blah. </div> .........post here...... </div>

I have no control over the width of the element. It is set by the user. The user wants the div to be centered. This does not work. I looked at the documentation, but it still won't work.

EDIT: ALREADY SHOULD LOSE MARGIN-LEFT: AUTO AND MARGIN-RIGHT: AUTO. THIS DOES NOT WORK.

+6
html css wordpress
source share
4 answers

In general, to position the div in the center, the method must make the left and right margins automatic, and then give the div the width:

 .centerDiv { margin-left:auto; margin-right:auto; width: XXX px; }
+3
source share

Give him a width less than the width of her parent.

 .parent { } .imgCenter { width:320px!important; margin:auto; } <div class="parent"> <img src="foobar.jpg" class="imgCenter" /> </div>
+2
source share

A simpler solution would be to set margin-left: auto , margin-right: auto and text-align: center (for the caption text) for all children of your containing element:

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

This means that you do not need to explicitly specify the width of your containing element, but it has the disadvantage that your subtitle text will have a width of 100%, which may look strange.

0
source share

I know this is an old question, but for those who found this on Google, I found another answer:

Just give these attributes to your wrapper element and the content will be centered.

 width: 1024px; margin-left: auto; /* I have used 1024px since I set the minimum resolution requirements for my website as 1024 x 768 */
0
source share

More articles:


All Articles