1 reply [Last post]
cmgray
cmgray's picture
Offline
newbie
Last seen: 2 years 27 weeks ago
Timezone: GMT-6
Joined: 2012-02-14
Posts: 2
Points: 4

Hi there,

I am having trouble centering two images side-by-side in a div. They appear side by side but are hugging the corners of the page rather than centered in the middle of the page. Any tips would be greatly appreciated! Here is my code:

<div id="footer">
<p><a href="http://elevatethemovie.com/">www.elevatethemovie.com</a></p>
<a style="text-decoration: none;" href="http://www.facebook.com/ElevateMovie">
<img  class="center" width="28" height="28" style="float:left" src="http://www.chloemasongray.com/facebook-test/2/images/facebook.png" border="0">
</a>
<a style="text-decoration: none;" href="https://twitter.com/elevatemovie">
<img class="center" width="28" height="28" style="float:right"  src="http://www.chloemasongray.com/facebook-test/2/images/twitter.png" border="0"></a>         
 
</div>

*CSS*

}

#footer {
width: 520;
padding-top: 135px;
margin:0 auto;

}

#footer p{
text-align:center;
font-weight: bold;

}

img.center {
display:block;
margin-left:auto;
margin-right:auto;

}

AttachmentSize
Screen Shot 2012-02-14 at 11.06.41 AM.png51.19 KB
ndirashful
ndirashful's picture
Offline
newbie
New Jersey
Last seen: 2 years 29 weeks ago
New Jersey
Timezone: GMT-5
Joined: 2012-02-17
Posts: 3
Points: 3

If you apply a margin:auto to

If you apply a margin:auto to an element, you have to specify a width.
You could try to wrap the 2 images with a paragraph for example, give the paragraph a width and then apply the margin auto to it. Like so:

p.button-holder{width:60px; margin:auto;}

<p class="button-holder"><a style="text-decoration: none;" href="http://www.facebook.com/ElevateMovie">
<img  width="28" height="28" style="float:left" src="http://www.chloemasongray.com/facebook-test/2/images/facebook.png" border="0">
</a>
<a style="text-decoration: none;" href="https://twitter.com/elevatemovie">
<img width="28" height="28" style="float:right"  src="http://www.chloemasongray.com/facebook-test/2/images/twitter.png" border="0"></a>    
</p>