如何在CSS中实现文字顶端对齐和设置屏幕图像宽度

Question

我很难弄清楚如何使文本彼此对齐，并在一行中对齐，而不是在新行上拆分。

另外，图片的宽度不会填满我所有的浏览器，而是剪切图片并使用默认的主题背景颜色。

这两个问题的解决方案将是非常棒的。

这是我的资料

​

/* 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>

​

Answer 1

以下是您问题的答案

我很难弄清楚如何使文本彼此对齐，并在一行中对齐，而不是在新行上拆分。

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

另外，图片的宽度不会填满我所有的浏览器，而是剪切图片并使用默认的主题背景颜色。

您需要将背景图像应用于body标记，而不仅仅是示例中的大标题。浏览器的默认css样式表将优先考虑大小写中可能有填充的情况。这就是为什么你的图片外面有一个边框的原因。

在css中还有一大堆你不需要的东西，除非这只是你粘贴的一个更大项目的一小部分。我在下面的例子中重新格式化了：

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