0

I have a div that already has a class and an id:

<div id="wrapper">
    <img src="images/go.jpg" class="hover" />
    <p class="text"> <a href="start.html"> Start your adventure</a> </p>
</div>

I am using this to create an image rollover that causes a link to become visible when moused over. However, for one of the images, specifically the one i copied in, I want to center it. How can i center it without losing the id?

user2824852
  • 1,151
  • 2
  • 8
  • 8
  • Set the margins on each side equal- http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally?rq=1 – hkk Dec 10 '13 at 22:06
  • I'm a little confused, do I copy in the margin code into '#wrapper .text { position:relative; bottom:30px; left:0px; visibility:hidden; } ' or in #wrapper:hover .text { visibility:visible; } ? – user2824852 Dec 10 '13 at 22:12
  • Put that code into whatever element you want to center. – hkk Dec 10 '13 at 22:12
  • So, if I want the picture and the text (as i'm using a rollover effect) to show up properly, I want to put the margin code into both? – user2824852 Dec 10 '13 at 22:13
  • 1
    Yes, or why not in `div#wrapper`? – hkk Dec 10 '13 at 22:44

1 Answers1

1

Apply "margin-left:auto; margin-right: auto" to your css rule. For example:

.hover {
  margin: 0 auto;
}
jtlowe
  • 847
  • 1
  • 8
  • 11
  • That caused the text to be centered within the picture- which I certainly wanted, but thought I couldn't do, but now I want one of the pictures (so I'm not sure if I want to edit the css, which would cause everyone of them to do that) to be centered on the webpage – user2824852 Dec 10 '13 at 22:18
  • Add another class to your img tag: for example adding ".center-image" like . Then create a .center-hover rule that applies the margins. Use the center-image class only on the image you want to center. – jtlowe Dec 10 '13 at 22:21
  • `#wrapper:hover .text { margin: 0 auto; visibility:visible; } #wrapper:hover .hover-center { margin: 0 auto; visibility:visible; margin-left:auto; margin-right: auto;} ` is what i have for my CSS rule- and I set my html img tag to hover-center for the class, but it didn't seem to do anything. (The top being the one that is for every other image) – user2824852 Dec 10 '13 at 22:30
  • You probably need to apply a width: and display:block to the hover-center, where width is the width of your image. – jtlowe Dec 10 '13 at 22:37