html - CSS:图像和链接垂直对齐(中心)和响应图像交换

Question

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

我遇到的另一个问题是，在使用小屏幕时，我想将 Logo 图像更改为其他来源。我最好只使用媒体查询(如果可能的话)。

示例 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

创建默认隐藏的另一个 Logo img，但在移动版本上，另一个 Logo 被隐藏，而显示移动 Logo 。此外，使用 line-height 将导航栏中的所有内容垂直居中 ( See this answer )。

在您的 CSS 中:

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

到#logo-link，添加position: relative;顶部:-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 你想要的。