HTML頁腳中的中心文本

我有一個頁腳，我希望將文本（電話號碼，地址等）全部放在同一行上，並將信息顯示在水平方向。我如何用CSS做這件事，還是需要用別的東西？這是我的HTML。HTML頁腳中的中心文本

（不是& NBSP被用來對準的電話號碼。而這裏的CSS。

footer { 
 
    display: block; 
 
    background-color: black; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 50px; 
 
    width: 100%; 
 
    border-top: 1px solid white; 
 
} 
 

 
.phone { 
 
    color: darkgrey; 
 
    font-size: 14px; 
 
} 
 

 
.address { 
 
    color: darkgrey; 
 
    font-size: 14px; 
 
}

<footer> 
 
    <div class="phone"> 
 
    Phone: (###) ###-####<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(###) ###-#### 
 
    </div> 
 
    <div class="address"> 
 
    Address: 1234 Road Name Hwy<br> City, State 12345 
 
    </div> 
 
</footer>

來源

2017-04-16 Jonathon Hooks

使用顯示器撓性和調整項目：中心中間..刪除這些BR標籤

footer { 
 
display:flex; 
 
background-color: black; 
 
position: fixed; 
 
bottom: 0; 
 
left: 0; 
 
right: 0; 
 
height: 50px; 
 
width: 100%; 
 
border-top: 1px solid white; 
 
justify-content:center; 
 
    align-items:center; 
 
    
 

 
} 
 
    
 
.phone { 
 
    color: darkgrey; 
 
    font-size: 14px; 
 
margin:auto; 
 
} 
 
    
 
.address { 
 
    color: darkgrey; 
 
    font-size: 14px; 
 
margin:auto; 
 
}

<footer> 
 
    <div class="phone"> 
 
    Phone: (###) ###-####(###) ###-#### 
 
    </div> 
 
    <div class="address"> 
 
    Address: 1234 Road Name Hwy City, State 12345 
 
    </div> 
 
</footer>

來源

2017-04-16 20:16:13

正是我想要的。謝謝！老實說，不知道爲什麼我把兩個數字放在一起是一個好主意。 –

您可以設置電話和地址的div來inline-block然後在使用text-align: center footer。然後在手機上重設text-align: left，如果您不希望該文本居中，請重新設置div。

footer { 
 
    display: block; 
 
    background-color: black; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 50px; 
 
    width: 100%; 
 
    border-top: 1px solid white; 
 
    text-align: center; 
 
} 
 
.phone { 
 
    color: darkgrey; 
 
    font-size: 14px; 
 
} 
 
.address { 
 
    color: darkgrey; 
 
    font-size: 14px; 
 
} 
 
.address, .phone { 
 
    display: inline-block; 
 
    text-align: left; 
 
}

<footer> 
 
    <div class="phone"> 
 
    Phone: (###) ###-####<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(###) ###-#### 
 
    </div> 
 
    <div class="address"> 
 
    Address: 1234 Road Name Hwy<br> City, State 12345 
 
    </div> 
 
</footer>

您還可以在頁腳使用display: flex; justify-content: center;。

footer { 
 
    display: block; 
 
    background-color: black; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 50px; 
 
    width: 100%; 
 
    border-top: 1px solid white; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
    
 
.phone { 
 
    color: darkgrey; 
 
    font-size: 14px; 
 
} 
 
    
 
.address { 
 
    color: darkgrey; 
 
    font-size: 14px; 
 
}

<footer> 
 
    <div class="phone"> 
 
    Phone: (###) ###-####<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(###) ###-#### 
 
    </div> 
 
    <div class="address"> 
 
    Address: 1234 Road Name Hwy<br> City, State 12345 
 
    </div> 
 
</footer>

來源

2017-04-16 20:06:05

的問題是不是真的緊靠應該是什麼線什麼很清楚，但我認爲這是一個很好的答案。也就是說，OP應該確保他們知道'br'和' '實際上做了什麼，以及何時/爲什麼會將CSS應用到單獨的div。我不確定OP是否會希望在具有不同CSS的不同div對象中使用電話和地址。 –

@MaxvonHippel是的，不知道他們想要做什麼與所有' 's。我猜他們正試圖在電話div上模擬'text-align：right'？ –

對措辭抱歉。我的描述技能絕對不遜色。但是，謝謝你的建議。 –

您可以應用display: inline-block到phone和address元素：

https://codepen.io/dreiv/pen/dWoZXr?editors=1100

自然div的延長它們設置成父元素的整個寬度，但在這種情況下，我們需要他們只佔用他們佔據的空間，並像內聯元素一樣流動。

來源

2017-04-16 20:10:42