Question

当我在div内创建h1时，我将margin-left设置为h1 55vw（视口宽度）。我的1378px宽度显示器没问题但是当我决定调整我的浏览器h1时，文本开始超出/超过图像。如何在任何尺寸的屏幕中将其设置在我需要的位置（非常高/低分辨率除外）。

HTML code：

<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

徽标容器水平居中，带有自动边距。文本绝对相对于徽标容器定位。这样，无论徽标在哪里结束，文本都将完全位于正确的位置。

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;
}

Answer 2

您要么需要设置css media query断点并创建一个响应式布局，您可以在其中控制在每个大小视口上设置的位置，或者做一些像中心那样无论大小如何都能正常工作。

Answer 3

或试试这个：

    .logo-container {
        background: url(https://www.google.com/images/srpr/logo9w.png) no-repeat center;
        padding: 28px 0 14px;
        text-align: center;
    }
    .text {
        margin-top: 15px;
        margin-left: 100px;
        font: 16px Arial;
        font-weight: 700;
        text-align: center;
        position: absolute;         
    }

使用“viewport-width”属性进行CSS文本定位

3 个答案: