0

So am trying this code... and I can't figure out how to center it on the page. I've tried many different techniques, I feel like there is something basic I am missing. Here is the html code:

**<div id="a" style="margin: 0; ">
   <a href="index.html" style="background-color: white; padding: 0px; background-image: url(); "><img class="first" src="textlogo.jpg" alt="Website Logo" style="margin: 0; " /></a>
    <a href="index.html" style="background-color: white; padding: 0px; background-image: url(); "><img class="second" src="textlogo2.jpg" alt="Website Logo #2" style="margin: 0; " /></a>  
</div>**

And here is my css:

#a img.second {display: none; }
#a:hover img.first {display: none; }
#a:hover img.second {display: inline-block; }

This code makes it so that when you hover over the first image, a second image appears in its place. Please help me figure out how to center it!

3
Contributors
4
Replies
21
Views
4 Years
Discussion Span
Last Post by B0716L
1

If you want to center the div element, assign it a width and apply an auto left and right margin. For example...

 #a { width:800px;margin:0 auto;}

Edited by JorgeM

1

@JorgeM: you are correct but it will not work as he is explicitly changing margin to 0.

<div id="a" style="margin: 0; ">

@B0716L: remove style from your div id "a" and then add what JorgeM in your css or you can just replace that in your div also.

style type="text/css">
 #a { width:800px;margin:0 auto;}


#a img.second {display: none; }
#a:hover img.first {display: none; }
#a:hover img.second {display: inline-block; }
</style>
<div id="a" >// <div id="a" style="width:800px;margin:0 auto;" >
   <a href="index.html" style="background-color: white; padding: 0px; background-image: url(); "><img class="first" src="Desert.jpg" alt="Website Logo" style="margin: 0; " /></a>
    <a href="index.html" style="background-color: white; padding: 0px; background-image: url(); "><img class="second" src="Tulips.jpg" alt="Website Logo #2" style="margin: 0; " /></a>  
</div>
0

@IIM and @JorgeM Thanks for the help! It works perfectly now! =)

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.