Not logged in. · Lost password · Register
Forum: General Help and Support Templates and Layout RSS
[SOLVED] Centering a DIV
A DIV containing one P with multiple IMGs
Avatar
claestw #1
Member since Sep 2007 · 11 posts
Group memberships: Members
Show profile · Link to this post
Subject: [SOLVED] Centering a DIV
I'm using the Minima template, and generating DIVs with the help of the div_shorthand plugin. Here's what I have now:

<div class="il"><p><img src="pic.jpg" width="240"><img src="pic.jpg" width="240"></p></div>

.il p { display:table; margin:0 auto; }
.il img { float:left; }

But the DIV simply refuses to center. For a live demonstration, please see http://www.claes.idv.tw/playground/playground

The four images there should, as one whole block, be centered on the page, yet it isn't.

In an attempt to find my error, I made up a test html page with the following body:

<body>
<style type="text/css">
.il p { display:table; margin: 0 auto;}
.il img { float:left; margin: 3px;}
</style>

<div class="il"><p><img src="pic.jpg" width="240"><img src="pic.jpg" width="240"></p></div>
</body>

And these two images on the text page centers without a problem.

I'm at a loss why the same code won't work when it's on a DokuWiki page, and I can't see anything obvious that could prevent it from centering. Any tips are appreciated.
This post was edited on 2007-10-19, 08:19 by claestw.
Avatar
Wolfgang_F. #2
Member since Jul 2007 · 24 posts
Group memberships: Members
Show profile · Link to this post
Do you really use the modified div_shorthand to do this?

I tried
#il[{{wiki:images:pic1.jpg|}}{{wiki:images:pic2.jpg|}}]#
it works fine if I test it on my wiki - both images are centered.

I did not change anything in your stylesheet, so I tested with
.il p { display:table; margin:0 auto; }
.il img { float:left; }

See it working in my wiki: http://www.heine-wiki.de/Playground

Edit:
Oh, I've just realized that it works with Firefox but not with IE ...


Edit2:
Seems to work now with another Stylesheet - see my Playground



Wolfgang
This post was edited 2 times, last on 2007-10-17, 15:23 by Wolfgang_F..
Avatar
claestw #3
Member since Sep 2007 · 11 posts
Group memberships: Members
Show profile · Link to this post
Actually, I did use the modified version (your version) of the div_shorthand, using Firefox 2, too, and it simply didn't work. But after seeing your alternative CSS I finally got it working. Thank you for again solving my headache! :D

The real problem was my lack of understanding in CSS, I think.

I have no idea why I thought I had to make the P tags display:table, it seems that was what prevented the centering. Then I took out the img float. My whole CSS for the .il DIV is now just one simple line of:

.il p { text-align:center; }

And that did it. Now I realize there's actually no reason to float the individual images inside the #il[]# construction, just let them line up in-line and center the "text". I wonder why I never realized it was this simple.

Oh thank you thank you. Such a good surprise, and on a Friday, too! I can just see it's going to be a great week-end. :D
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2019-10-15, 16:07:51 (UTC +02:00)