CSS Logo Aligning

Discussion in 'CSS' started by tksforlife, Nov 12, 2012.

  1. #1
    I'm having some trouble getting my logo to vertically align to the middle of my nav bar. Currently it seems to demand being top aligned. If anyone can give me some help it would be much appreciated!

    artsatheart.atwebpages.com

    Thanks!​

     
    tksforlife, Nov 12, 2012 IP
  2. WeddiGo

    WeddiGo Greenhorn

    Messages:
    40
    Likes Received:
    2
    Best Answers:
    2
    Trophy Points:
    18
    #2
    Hiya

    looking at the code you've put your logo as a part of a list, that's ok but the logo image is too big so it pops under...you can change the size of the image either by physically changing the size in Photoshop or by using CSS...try experimenting with adding style="height:55px;" after the <img id"logo" in your code
     
    Last edited: Nov 13, 2012
    WeddiGo, Nov 13, 2012 IP
  3. tksforlife

    tksforlife Greenhorn

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    Currently the nav height is 80px. So if the img height is >80 then the img goes outside. If it is <80 it rises to the top of the nav. Can I have css always auto size the img to remain vertically centered in the nav?
     
    tksforlife, Nov 13, 2012 IP
  4. tksforlife

    tksforlife Greenhorn

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    Solved. Thanks!
     
    tksforlife, Nov 13, 2012 IP
  5. TheCleverRobot

    TheCleverRobot Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    BONUS: You could also try removing the height off of the nav bar. This will force it to use your logo to determine its height, then simply add top and bottom padding to the NAV bar, then your logo will always be vertically centered!
     
    TheCleverRobot, Nov 28, 2012 IP