css - 居中 <div> CSS 和 HTML 的最小宽度

标签 css

我正在尝试为我的网站编写一个简单的 404(找不到页面)错误页面: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 中的粗体文本会越过返回主页的链接。这是截图:

Figure 1

当然要解决这个问题,我需要像这样在#title 上放置一个最小宽度属性:

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

我在那里使用 200px 作为示例,但无论我将其设置为什么大小,它都不起作用。任何帮助将不胜感激。

最佳答案

只需将其添加到您的 CSS 中:

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

这将防止 #title 中的文本换行。

关于css - 居中 <div> CSS 和 HTML 的最小宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27639845/

相关文章:

css - 增加 jQuery Mobile 中数据图标 ="delete"的点击区域(具有相同的图像大小)?

html - CSS 样式,样式子项

css - 如何在纯 CSS 中将鼠标悬停在文本上时创建一个框?

html - 如何让我的图像交换在 CSS 中工作?

html - 为什么我不能在 WebComponent 元素上设置大小

html - SVG 动画变换原点属性不适用于不同的浏览器

html - 如何防止固定位置标题超出浏览器的宽度

jquery - 将 CSS 值传递给 DOM 样式属性

html - 一个在不应该移动的时候移动的 img

google-chrome - 社交图标的 CSS 对齐 - Chrome/Safari 特定