dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to display links in the middle a header?

  1. #1
    Join Date
    Oct 2016
    Location
    Moscow
    Posts
    51

    How to display links in the middle a header?

    I have a header. There are some links in the header. How can I display them in the middle? Now I am just using "padding-top: 20px;"

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    323
    not clear? "Header" as in h1, h2, h3, h4, h5, h6??? "middle" as in "centered vertically???

    CSS line-height same as font-size will center one line.

  3. #3
    Join Date
    Oct 2016
    Location
    Moscow
    Posts
    51
    I would like to display it in the <header>

    <style>
    .header {height: 70px;}
    .header a {
    padding-top: 25px;
    }
    </style>

    <header>
    <a href='#'>Link 1</a>
    <a href='#'>Link 2</a>
    </header>

    It seems to me that my way isn't good("padding-top: 25px;")

  4. #4
    Join Date
    Dec 2012
    Posts
    1,493
    It seems to me that my way isn't good("padding-top: 25px;")
    Correct, this is bad as it's not self adjusting if anything in the measurements or sizes changes.
    auntnini's trick will work. Optionally you can use flex layout which enables for easy and clear vertical centering.
    Code:
    <style>
    .header {
        height: 70px;
        display: flex;
        flex-direction: row;
        align-items: center;  /* for vertical centering */
        justify-content: center;  /* for horizontal centering */
    }
    Additionally I recommend to do without fixed height. As a result the size will be self adjusting when the content changes. You can the adjust the layout by padding or margin.

  5. #5
    Join Date
    Oct 2016
    Location
    Moscow
    Posts
    51
    Quote Originally Posted by Sempervivum View Post
    Correct, this is bad as it's not self adjusting if anything in the measurements or sizes changes.
    auntnini's trick will work. Optionally you can use flex layout which enables for easy and clear vertical centering.
    Code:
    <style>
    .header {
        height: 70px;
        display: flex;
        flex-direction: row;
        align-items: center;  /* for vertical centering */
        justify-content: center;  /* for horizontal centering */
    }
    Additionally I recommend to do without fixed height. As a result the size will be self adjusting when the content changes. You can the adjust the layout by padding or margin.
    Thank you so much!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles