Question

我正在尝试为我的网站编写一个简单的404（Page not Found）错误页面：bazingamanphdgaming.t15.org。到目前为止，这是我的代码：

<html>
    <head>
    <title>404 - Not found</title>
    <style>
        #title {
            position:fixed;
            top:40%;
            color:white;
            font-size:40px;
            text-align:center;
            width:100%
        }
        #link {
            position:fixed;
            top:45%;
            font-size:20px;
            text-align:center;
            width:100%
        }
    </style>
</head>
<body style="background-color:black">
    <div id="title"><b>404 - Page not found</b></div>
    <div id="link"><br />
        <a style="color:white" href="http://bazingamanphdgaming.t15.org">
            Return to the BazingaManPHD Gaming home page.
        </a>
    </div>
</body>
</html>

然而，当我减少浏览器窗口的宽度时，＃title中的粗体文本会越过返回主页的链接。这是截图：

当然要解决这个问题，我需要在#title上放一个min-width属性，如下所示：

<div id="title" style="min-width:200px"><b>404 - Page not found</b></div>

我在那里使用200px作为一个例子，但它看起来没有用，无论我把它作为什么尺寸。任何帮助将不胜感激。

Answer 1

只需将其添加到您的CSS：

#title {
    white-space: nowrap;
    /* rest of your styles */
}

这会阻止#title中的文字换行。

Answer 2

您可以通过将display:table和display:table-cell设置为容器来启用垂直对齐。

＆＃13;

html,body{
    width:100%;
    height:100%;
}
body{display:table}
.page {
    background:black;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width:100%;
    height:100%;
}
.title {
    color:white;
    font-size:40px;
}
.link {
    font-size:20px;
    color:white;
}

＆＃13;

<div class="page">
    <div class="title">404 - Page not found</div>
    <a class="link" href="http://bazingamanphdgaming.t15.org">Return to the BazingaManPHD Gaming home page.</a>
</div>

＆＃13;

通过这种方式，它会集中放入任何内容。

http://jsfiddle.net/gaby/f6c1wupL/1/

演示

Answer 3

这是一个小提琴，看看。基本上你的CSS有几个问题。将元素的位置设置为固定会使它们脱离自然流动。如果您将页面视为一张纸，无论您将它们放置在哪里，这些固定元素都会漂浮在纸张上方。通过将它们放在相对的位置，您将它们放在纸上，这样其他元素的位置就会对它们的位置产生影响。即将它们挡开。

将它们标记为相对于顶部＆＃39;选择器不再起作用而是向下移动页面上的项目给它们一个margin-top来偏离它们与body的边界（它的父元素）。

#title {
position:relative;
margin-top:40%;
color:white;
font-size:40px;
text-align:center;
width:100%;

http://jsfiddle.net/crnc6ht5/

中心<div> CSS和HTML </div>的最小宽度

3 个答案: