3 images in a row centered in container
Clash Royale CLAN TAG#URR8PPP
3 images in a row centered in container
CSS
.contain
max-width:960px;
text-align:center;
.category
position:relative;
display: inline-block;
float:left;
padding:10px;
.category2
position:relative;
display: inline-block;
pading:10px;
.category3
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
HTML
<div align="center" class="category">
<img src="gemstoneshomebutton.png" />
</div>
<div align="center" class="category2">
<img src="dichroichomebutton.png" />
</div>
<div align="center" class="category3">
<img src="filigreehomebutton.png" />
</div>
i am trying to align 3 images that are 309 px wide , by 111 px high inside a container div,
and they don't align center and also the third image jumps down below the other two images.
I've tried to adjust the width of the container and the 3 divs, I've tried tables and changing the width on the actual html with no success.
This is my first time working with divs and i thought they would be easier, perhaps my math is off when assigning widths, or maybe I'm just structuring it all wrong.![here is an example of what i am trying to achieve, the three categories in the picture here.] http://i49.tinypic.com/2r2uqso.jpg
any
and all help would be appreciated.
float: left
thank you so much, though i just did that, and all it did was put space between the first two divs/images.
– user2255322
Apr 7 '13 at 20:05
'Inspect Element' is your friend, use it to troubleshoot positioning issues. My guess is you probably need to adjust the widths, and get rid of that margin. Also important to know is that floating an element makes the
display property irrelevant.– user788472
Apr 7 '13 at 20:08
display
align attribute is deprecated in HTML4.1 and not supported in HTML5.– pzin
Apr 7 '13 at 20:11
align
3 Answers
3
CSS
.contain
max-width:960px;
text-align:center;
.category
position:relative;
display: inline-block;
float:left;
padding:10px;
HTML
<div align="center" class="category">
<img src="gemstoneshomebutton.png" />
</div>
<div align="center" class="category">
<img src="dichroichomebutton.png" />
</div>
<div align="center" class="category">
<img src="filigreehomebutton.png" />
</div>
thank you for your help. It appears that the first div is still over to the side (outside the container) and the third div is still below the other two, after i made these changes. i49.tinypic.com/28mrt4.png see here
– user2255322
Apr 7 '13 at 20:13
Think that if your images has each 309px width [3*309=927px] and has a padding left and right [(2*10)*3=60)] all three together will have a width of 987px, which is more than 960px. And the last one goes down due to lack of space.
– pzin
Apr 7 '13 at 20:26
that solved my problem, thanks!
– user2255322
Apr 8 '13 at 2:43
Don't forget to add 'alt' attribute in the img tag! It is especially important for people who a partially sighted or blind.
http://www.myblogsplace.com/images-alt-text
Yes the alt attribute is really important. It is actually used by "screen reader" software so when a person is listening to the content of a webpage, like a blind person, can interact with that specific element. All images should have this attribute so it is accessible.
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Put
float: lefton all three. Also go watch some screencasts on CSS-Tricks, they'll make your learning process easier :)– user788472
Apr 7 '13 at 20:00