Member Avatar for B0716L

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
  • 124 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by B0716L

Dani AI

Generated

Quick summary: and were right to move layout rules out of the inline style — letting a stylesheet control the wrapper is the clean fix. Below are three practical alternatives that keep the logo centered and improve the hover-swap behavior, plus a couple of small accessibility and troubleshooting notes specific to this thread (both of your anchors point to index.html, so some simplification is possible).

Modern, no-width centering (flexbox)
Use a flex container to center the logo without giving the wrapper a fixed width. This keeps the element centered on any viewport size and works well for one-line header items.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Swap images without layout shift (overlay + opacity)
Hiding one image with display:none causes reflow; stack both images in the same spot and toggle opacity instead. This preserves layout and lets you add a smooth transition.

#logo { position: relative; display: inline-block; }
#logo img { display: block; max-width: 100%; }
#logo img.swap { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .25s; }
#logo:hover img.swap { opacity: 1; }
#logo:hover img.base { opacity: 0; }

Single-anchor background-image swap (simpler HTML)
Since both anchors link to the same page, a single anchor with a background-image swap keeps HTML minimal. If you use this, include accessible text inside the anchor (visually-hidden) so screen readers still get the site name.

a.logo { display:inline-block; width:300px; height:100px;
         background-repeat:no-repeat; background-size:contain;
         background-image:url(logo1.png); }
a.logo:hover { background-image:url(logo2.png); }

.visually-hidden { position:absolute; left:-9999px; }

Quick tips: remove inline styles, make sure both images are identical in dimensions, set images to display:block to remove inline whitespace, and prefer opacity transitions (not display) for smooth fades. For accessibility, keep meaningful alt text for a real logo link or include hidden text if you use background images. For a modern reference on centering/layout, see the Flexbox basics on MDN (search "MDN Flexbox").

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

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
Member Avatar for IIM

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

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

: 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>
Member Avatar for JorgeM

- Good catch.

Member Avatar for B0716L

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.