Grow your CSS skills. Land your dream job.

Horizontally Center This Element

  • # November 4, 2012 at 10:12 am

    Hi. I’m working on some navigation and I have a little tooltip that drops down when you hover over each navbutton. The text in the tooltip needs to be centered within the navbar, but “auto” left and right margins doesn’t work for this. I’m suspecting it may be because the element is absolutely positioned (which is because I don’t want the tooltip to push the below elements down when it moves).

    Here’s a test page: http://gchiller.com/test/index-%28IP%29.html

    Can someone please help?

    # November 4, 2012 at 10:58 am

    It’s not perfect but try adding about 30px of left margin to the p .navtip inside your a link.

    # November 4, 2012 at 11:01 am

    @Paulie_D That works…but only for the portfolio and contact buttons, which have a width of 86px and 89px, respectively. And I don’t want to have to use a different padding for each button, although I will if that is the only way.

    # November 4, 2012 at 11:04 am

    I tried margin-left & right of 25% which works on my laptop BUT it splits the p on two lines.

    # November 4, 2012 at 11:08 am

    Oooh…wait.

    Change width:auto to width:100% on p.navtip.

    # November 4, 2012 at 11:11 am

    Yeah, that works. The only thing is, I’ll have to change the a element to width:100%, so it’s not all glitchy on the sides of the word. Or I could just use -20px of padding instead of margin. Is there a way to do this where the only rollover area is the word itself? (not the whole 100% width of the navbar?

    # November 4, 2012 at 11:16 am

    Actually, the padding idea isn’t working, so I do have to make the a element 100% width of the navbar. Unless there is another way.

    # November 4, 2012 at 11:18 am

    Hmm…the width: 100% isn’t working on the a element. I’m stumped.

    # November 4, 2012 at 11:21 am

    Ah! There we go. Display:block on the a fixed it! I guess I’ll just deal with the a element being the whole width of the navbar.

    Thanks for the help! @Paulie_D

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".