如何在CSS中使文本顶部对齐并使图像宽度占据整个屏幕

Question

如何在CSS中使文本顶部对齐并使图像宽度占据整个屏幕

javascripthtmlcss

3

我遇到了困难，无法将文本对齐在一起，并且在单行中对齐，而不是分开成新的一行。

此外，图像的宽度没有填满整个浏览器，而是裁剪了图像并使用了默认的主题背景颜色。

解决这两个问题的方法将是很棒的。

以下是我的代码：

/* Header */

.large-header {
    position: relative;
    width: 100%;
    height: 514px;
    background: #333;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}

.demo-1 .large-header {
    background-image: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/P2IQDFK9VC.jpg');
}

.demo-3 .large-header {
    background: #7f8c8d;
}

.main-title {
    position: absolute;
    margin: 0;
    padding: 0;
    color: #f9f1e9;
    text-align: justify;
    top: 40%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

.main-title1 {
    position: absolute;
    margin: 0;
    padding: 0;
    color: #f9f1e9;
    text-align: justify;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

.main-title2 {
    position: absolute;
    margin: 0;
    padding: 0;
    color: #f9f1e9;
    text-align: justify;
    top: 60%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

.main-title3 {
    position: absolute;
    margin: 0;
    padding: 0;
    color: #f9f1e9;
    text-align: center;
    top: 70%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

.demo-1 .main-title,
.demo-3 .main-title {
    font-size: 3.2em;
}

.demo-3 .main-title {
    padding: 10px 40px;
    border: 10px double #f9f1e9;
    text-transform: uppercase;
}

.main-title .thin {}

@media only screen and (max-width: autopx) {
    .demo-1 .main-title,
}

<div class="container demo-1">
    <div class="content">
        <div id="large-header" class="large-header">
            <canvas id="demo-canvas"></canvas>
            <h1 class="main-title" style="font-family: 'Fjalla One', sans-serif; text-align: justify ;">Sigma Phi Delta Fraternity</h1><br>
            <h2 class="main-title1" style="text-align: justify">The Premier International Fraternity of Engineers</h2><br>
            <h3 class="main-title2">San Diego State University - Beta Lambda</h3><br>
            <div class="btn btn-warning-outline hover main-title3">
                <a href="https://securelb.imodules.com/s/1247/aff_1_home.aspx?sid=1247" style="text-decoration: none; " class="btn-1 btn-1a ">
                    National Website
                </a>
            </div>
        </div>
    </div>
</div>

- Fadi Ghanim

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- max234435 · Answer 1

以下是您问题的答案：

我遇到了一个问题，无法弄清如何使文本在顶部对齐并在一行中对齐，而不是分开成新行。

使用line-height: 10px;，它将为您调整字母之间的间距。

此外，图像的宽度未填充整个浏览器，而是裁剪图像并使用默认主题背景颜色。

您需要将背景图像应用于body标签，而不仅仅是示例中的large-header。您的浏览器的默认CSS样式表会优先考虑，并且在您的情况下可能具有填充。这就是为什么您的图像外面有一个边框。

除非这只是您粘贴的更大项目的片段，否则您的CSS中还有很多不需要的东西。我在下面的示例中重新格式化了：

https://jsfiddle.net/max234435/aatjs2gu/