Question

出于某种原因，当浏览器宽度小于1015px宽度时，我的图像居中，但当我超过它时，它完全向左移动，没有填充页面的边。我在做：

HTML

<div id="nav">
    <div id="logo">
        <a href="../index.html"><img src="../img/logo.png" alt="logo" style="height:100px; width:100px;" /></a>
    </div>

    <ul>
        <li><a href="" style="color: white; border-bottom: 2px solid white;">How It Works</a></li>
        <li><a href="../portfolio/index.html">Portfolio</a></li>
        <li><a href="../team/index.html">Team</a></li>
        <li><a href="../contact/index.html">Contact</a></li>
        <li><a href="../jobs/index.html">Jobs</a></li>
    </ul>
</div>

<img class="center" src="../img/laptop.png" alt="laptop-pic" style="height:500px; width:500px;" />

CSS

#nav {
    margin-bottom: 100px;
}

#nav ul li {
    display: inline-block;
}

#nav ul {
    position: relative;
    float: right;
    right: 60px;
    bottom: 30px;
}

#nav li {
    padding-right: 20px;
    font-size: 20px;
    color: white;
}

.canvas-wrap {
    min-height: 100%;
    margin-bottom: -30px;
}

img.center {
display: block;
margin-left: auto;
margin-right: auto;
}

修改

问题出在导航栏的标记/样式中。当我删除导航栏的标记时，它正确居中。我编辑了这个问题，包括导航栏的HTML和CSS。我不明白它有什么问题。

Answer 1

我不知道您正在使用哪种浏览器。当我在Chrome上运行你的代码时，一切正常，但IE并不好。我认为这与IE未正确呈现display: block和display: inline-block的已知问题有关。

我采用了不同的方法来完成它。刚用div包裹图像并使内容居中。它不是更优雅的答案。

见下文：

<强> HTML

<div class="divCenter">
   <img src="../img/laptop.png" alt="laptop-pic" style="height:500px; width:500px;" />
</div>

<强> CSS

.divCenter {
    width:100%;
    text-align:center;
}

Answer 2

在Firefox中查看时，我没有看到任何问题。然而，您的标记和CSS非常简单。我认为这只是因为你不想在这里发布你的整个解决方案。

您可能需要考虑的是在标记中关闭#nav之前添加clearfix。如下所示：

<div id="nav">
<div id="logo">
    <a href="#../index.html"><img src="img/logo.png" alt="logo" style="height:100px; width:100px;" /></a>
</div>

<ul>
    <li><a href="" style="color: white; border-bottom: 2px solid white;">How It Works</a></li>
    <li><a href="#../portfolio/index.html">Portfolio</a></li>
    <li><a href="#../team/index.html">Team</a></li>
    <li><a href="#../contact/index.html">Contact</a></li>
    <li><a href="#../jobs/index.html">Jobs</a></li>
</ul>
<div class="clear"></div>

明确的CSS需要绝对的基础知识，尽管你可以根据自己的意愿使你的clearfix变得复杂：

.clear { clear: both; }

您还可以将溢出作为选项添加到#nav中，但对于持有导航的容器，绝对不建议这样做，因为它会隐藏像subnavs这样的项目。但要添加溢出：隐藏，请执行以下操作：

#nav {
margin-bottom: 100px;
overflow: hidden;
}

我对.center图像的处理方法是删除内联样式，然后使用CSS声明/和HTML标记执行以下操作：

<img class="center" src="img/laptop.png" alt="laptop-pic" style="" />


img.center {
display: block;
margin: 0 auto;
width: 100%; /* For responsive */
max-width: 500px; /* For responsive */
height: auto; /* For responsive */
}

#nav ul li的内联屏幕无效，因为您已将float: right应用于#nav ul。您在同一right: 60px声明中也有ul。如果您的意图是li元素的内联阻止，则需要删除上述内容。

我在回答中最后提到的是你使用display：inline-block;确保从中删除空格。关于如何做到这一点有几种方法 - 其中没有一种是漂亮的。你不能用CSS真正删除空格，所以最好的方法是在标记中修复它。以下是许多解决方案：

内联块的解决方案1：

<ul>
    <li><a href="" style="color: white; border-bottom: 2px solid white;">How It Works</a></li
    ><li><a href="#../portfolio/index.html">Portfolio</a></li
    ><li><a href="#../team/index.html">Team</a></li
    ><li><a href="#../contact/index.html">Contact</a></li
    ><li><a href="#../jobs/index.html">Jobs</a></li>
</ul>

内联块的解决方案2：

<ul>
    <li><a href="" style="color: white; border-bottom: 2px solid white;">How It Works</a></li><!--
    --><li><a href="#../portfolio/index.html">Portfolio</a></li><!--
    --><li><a href="#../team/index.html">Team</a></li><!--
    --><li><a href="#../contact/index.html">Contact</a></li><!--
    --><li><a href="#../jobs/index.html">Jobs</a></li>
</ul>

浏览器扩展时的图像uncenters

2 个答案: