html - 具有 "viewport-width"属性的 CSS 文本定位

Question

当我创建一个包含 h1 的 div 时，我将 margin-left 设置为 h1 55vw(viewport-宽度)。我的 1378px 宽度显示器没问题，但当我决定调整浏览器 h1 的大小时，文本开始超越/超过图像。如何在任何尺寸的屏幕(非常高/低分辨率除外)中将其设置在我需要的位置。

HTML代码:

<div class="logo-container">
        <h1 class="text">
            Netherlands
        </h1>
    </div>

它的 CSS:

<style>
    .logo-container {
        background: url(https://www.google.com/images/srpr/logo9w.png) no-repeat center;
        padding: 28px 0 14px;
    }
    .text {
        margin-top: 62px;
        margin-left: 55vw;
        font: 16px Arial;
        font-weight: 700;
    }
</style>

Answer 1

Try this Fiddle

Logo 容器水平居中，并带有自动边距。文本相对于 Logo 容器绝对定位。这样，无论 Logo 位于何处，文本都绝对会位于正确的位置。

HTML

<div class="logo-container">
    <h1 class="text">
        Netherlands
    </h1>
</div>

CSS

.logo-container {
    background: url(https://www.google.com/images/srpr/logo9w.png) no-repeat;
    height: 95px;
    width: 269px;
    margin: 0 auto;
    position: relative;
}
.text {
    position: absolute;
    top: 60px;
    left: 210px;
    font: 16px Arial;
    font-weight: 700;
}