Question

我无法弄清楚如何使文本在彼此的顶部对齐并在一条线上对齐，而不是在一条新线上分开。

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

解决这两个问题的方法非常棒。

这里有我的

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

以下是您的问题的答案

我无法弄清楚如何使文本在彼此之上对齐并在一行中对齐而不是在新行上分开。

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

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

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

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

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

如何在CSS中将文本对齐并使屏幕的图像宽度

1 个答案: