對齊文本

Question

請看這張圖會解釋更好 https://gyazo.com/333fc2ef04f558480386b7be67eb1bda

我在我的網頁底部的橙色頁腳，我想文本對齊「左」，在頁腳欄中的同一行上顯示「中心」和「右」。

現在，文本對齊，但文本3對齊在3隔離線之下。

這是我的HTML：

<div class="row"> 
    <div id="footer"> 
    <div align="left"><h3>Contact</h3></div> 
    <div align="center"><h3>Computerbasen</h3></div> 
    <div align="right"><h3>Info</h3></div> 
    </div> 
    </div> 

這是我的CSS：

#footer { 
    background-color: #FF7633; 
    width: 100%; 
    height: 50px; 
    border-radius: 5px; 
    padding-top: 10px; 
    position: absolute; 
    bottom: 0; 
    } 

Answer 1

我建議flexbox這種類型的佈局。

刪除align屬性並將其添加到您的#footer。

#footer { 
    display: flex; 
    justify-content: space-between; 
} 

Answer 2

你可以用許多不同的方式實現它。

@Vestride給了你一個方法。

另一種方法是添加另一種選擇：

#footer div{ 
    display: block; 
    float: left; 
    width: 30%; 
} 

OR

#footer div{ 
    display: inline-block; 
    width: 30%; 
} 

這將選擇所有div內#footer和對齊。 我們把三個div的寬度劃分得一致。所以，因爲width: 100%是偶數。我們需要從中減去10％來使用邊距，其餘部分除以3.所以每個div將是頁腳寬度的30％。這樣它將在同一條線上。請記住，任何有100％寬度的元素都將在單獨的行上。意思是說，如果同一行中的兩個DIV具有100％的寬度，它們將在彼此之下，但是如果它們之間的寬度（它們中的每一個寬度是50％）那麼它們將在相同的行中。

您可以使用相同的想法，並以自己的方式創意。由於在CSS中可以實現不同的各種方法。只需選擇你最喜歡的一個就可以了。