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