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。

CSS：image＆amp;链接verticaly aligned（center）和响应式图像交换

1 个答案: