CSS：图像和链接verticaly对齐（中心）和响应图像交换

Question

我有几个问题与我的CSS。正如您在fiddle中看到的那样，我希望图像能够完美自动地垂直对齐，正确地对准中间。菜单链接也是如此。

我遇到的另一个问题是，我想在使用小屏幕时将徽标图像更改为另一个源。我希望只使用媒体查询（如果可能的话）。

样本HTML

<header> 
    <nav id="menu-main" class="clearfix"> 
     <a id="logo-link" href="#"><img id="logo" 
    src="http://juvera.me/websites/openwork/beta/_img/logo-291x60.png" title="Open Work" alt="Open Work" /></a> 

     <ul id="menu-links"> 
     <li class="link-active"><a class="link-active" href="/">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </nav> 
</header> 


<main> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
</main> 

CSS

body { font-family: Century Gothic, sans-serif; margin: 0em; padding: 0em; } 
header, main { display: block; margin: 0em; padding: 0em; } 
header { 
    background-color: #292828; 

    height: 70px; 
    max-height: 70px; 

    /* Overlay */ 
    width: 100%; 
    position: absolute; left:0; right:0; z-index: 999; 
} 
header nav { 
    height: 70px; 
} 



/* ************************************* 
Image Menu 
************************************* */ 
#logo { 
    margin: auto 0em auto 10%; 
    vertical-align: middle; 
} 
#logo-link { 
    height: 70px; 
    vertical-align: middle; 
} 


/* ************************************* 
Links menu 
************************************* */ 
#menu-links { 
    float: right; 
    margin: auto 10% auto 0em; 
} 
#menu-links li { 
    display: inline-block; 
} 
#menu-links li a { 
    color: #fff; 
    font-size: 0.75em; 
    text-decoration: none; 
    text-transform: uppercase; 

    height: 70px; 
    padding: 0em 1em 0em 1em; 
    display: inline-block; 
    vertical-align:middle; 
    text-align: center; 
} 


main { padding-top: 70px; background-color: #cccccc; } 

@media (max-width:10em) { 
/* smartphones, iPhone, portrait 480x320 phones */ 
    #logo{ src:"http://juvera.me/websites/openwork/beta/_img/logo-150x31.png"; } 
    main { font-size: 1em; } 
} 

Answer 1

移动版本创建另一个标志IMG是被默认隐藏，但，其他徽标也会被隐藏，并显示移动徽标。此外，使用line-height将所有内容垂直置于导航栏中（See this answer）。

在你CSS：

要header，添加line-height: 70px;

要#logo-link，添加position: relative; top: -4px;

媒体查询更改为：

@media (max-width: 10em) { 
    #logo { display: none; } 
    #logo-mobile { display: inline; } 
    main { font-size: 1em; } 
} 

并添加#logo-mobile { display: none; }

在您的HTML中，添加#logo旁边的另一个img，其ID为logo-mobile，其中包含您要的src。