What am I missing to center this div/images?

Asked Jul 18 '18 at 13:46

Active Jul 18 '18 at 13:46

Viewed 34 times

I have 3 images here each with text underneath each image. They're all supposed to be hugging each other (so no spaces between them) and so far that's as far as I can get. The problem is that they're all going to the left side when I want the whole div to be centered.

HTML:

<div align="center">
<p style="float: left; font-size: 7pt; text-align: center;"><a href="/link" target="_blank"><img src="/images1.jpg" height="200" width="200"></a><br><i>Text Here</i></p>

<p style="float: left; font-size: 7pt; text-align: center;"><img src="/images2.jpg" height="200" width="200"><br><i>Text Here</i></p>

<p style="float: left; font-size: 7pt; text-align: center;"><a href="/link" target="_blank"><img src="/images3.jpg" height="200" width="200"></a><br><i>Text Here</i></p>
</div>

asked Jul 18 '18 at 13:46

Brandon

1

`float` takes the P elements out of the centered context of the div. This is really a job for CSS with flex (https://developer.mozilla.org/en-US/docs/Web/CSS/flex) or even grid (https://developer.mozilla.org/en-US/docs/Web/CSS/grid) – gkl Jul 18 '18 at 13:50
The first rule of centering is **"DON'T USE FLOAT"** – Paulie_D Jul 18 '18 at 13:53
1

Or use `span`'s instead of `p`'s and remove the floats, that works too. – SBylemans Jul 18 '18 at 13:55
1

`align` does not exist in HTML5. Do not use `float` use `flexbox` ( for eg). `i` for italic text is not needed. Style the p with `font-style:italic`. etc. – Mihai T Jul 18 '18 at 14:00
@Paulie_D and the second rule of centering is...? – j08691 Jul 18 '18 at 14:07
1

2nd rule is also "DON'T USE FLOATS". – Paulie_D Jul 18 '18 at 14:08
1

@gkl thank you, i changed it to flex and got it all working – Brandon Jul 18 '18 at 14:18
@SBylemans also did this. Thank you guys for the help :) – Brandon Jul 18 '18 at 14:18

What am I missing to center this div/images?

0 Answers0