Question

我有一个网页的标题，我可以填充移动它，但如果我调整页面大小在相同的位置文本住宿。我希望它随着页面大小的变化而移动

我尝试将其从其中的两个divs中取出。我尝试做padding: auto，并使用margins进行移动。

html：

<div class="bg">
            <div class="title">
                <h1 id="pageTitle">Gypsy Moth Web Works</h1>
            </div>
        </div>

css：

.bg {
      background-image: url("moth.jpg");

        height: 89%;

        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }

    #pageTitle {
        color: hsla(48, 41%, 63%, 1);
        text-align: center;
        font-family: 'Electrolize', sans-serif;
        font-size: 80px;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

        margin: 0;
    /*284*/
        padding-top: 284px;
    }

Answer 1

这里的问题是您试图通过添加padd-top：284px来使h1垂直居中，这不是响应式居中方法，因为文本始终位于顶部284px处。

更好的居中方法是更改h1是子元素的div的属性。在父div中添加：

display：flex //将div转换为响应元素

justify-content：center; //将子元素在中心x轴上对齐

align-items：center; //将子元素在中心y轴上对齐

height ：（实验）//在相对/响应或像素测量之间进行选择以获得所需的效果

删除：顶部填充

示例：

.bg {
      background-image: url("moth.jpg");

        height: 100%;

        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }

    #pageTitle {
        color: hsla(48, 41%, 63%, 1);
        text-align: center;
        font-family: 'Electrolize', sans-serif;
        font-size: 80px;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        display:flex;
        justify-content:center;
        align-items:center;
        margin: 0;
        padding-bottom:20px;
        height:50vh;
    /*284*/
        
    }

<div class="bg">
            <div class="title">
                <h1 id="pageTitle">Gypsy Moth Web Works</h1>
                
                <p>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                </p>
            </div>
        </div>

我需要文本来调整网站的大小（我需要它来响应该网站）

1 个答案: