如何将文本在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/