Vertical align header text within the header class

gastoff
gastoff

I've added code to adjust the h3 headers so that they are 75px tall and have a background. I figured out how to get the header text to be centered horizontally within the h3 element, but I cannot figure out how to adjust its vertical position:

If I try to use padding or margin, it adds it to the outside of the element, which moves the background and text together. When I try to use "background-position" with a negative vertical offset, it causes the top of the background image to be cut off. Is there a vertical version of "text-indent" that can be used to bump the text down within the header element so that it rests within the scroll body?

image

Comments

  • cgregory
    cgregory
    Posts: 780

    A quick look at your code shows you are using the Strong tag for your titles. This makes it easier.

    What you want to do is give those tags a class. Lets call it WikiTitle

    <strong class="WikiTitle"><a href="/wikis/history" class="wiki-page-link">History and Lore</a></strong>

    <strong class="WikiTitle">Miscellaneous</strong>

    That allows use to modify just the text with the class WikiTitle in your css

    .WikiTitle {

        position: relative;

        top: 20px;

    }

     

     

     

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • gastoff
    gastoff
    Posts: 136

    Will this affect all the "strong" items across the site? Would this cause anything that is *bold* to be pushed down by 20px?

    So do I add the .WikiTitle CSS bit into the Custom CSS area and then I add the HTML stuff in front of the text in the page's edit screen?

    image

  • Kallak
    Kallak
    Posts: 1,090

    No, it wouldn't. It's just adding the class to that particular strong tag.

    All the best,
    - Kallak
  • cgregory
    cgregory
    Posts: 780

    The reason for adding a class to those particular strong tags is so that the css only gets applied to strongs with that class. Technically, the css as i provided would apply to anything with that WikiTitle class.

     

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions