HTMLフッタの中央のテキスト

Question

私はフッタを持っており、テキスト（電話番号、住所など）を同じ数行に整列させ、情報を水平に表示するようにしたいと考えています。どのように私はCSSでこれを行うでしょうか、それとも別のものを使う必要がありますか？ここに私の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>

Answer 1

用表示フレックスと-アイテムを揃える：中間のためのセンターは...それらの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>

Answer 2

あなたはinline-blockに電話とアドレスdivを設定することができ、その後にtext-align: centerを使用しますフッター。そのテキストを中央に配置したくない場合は、text-align: leftを電話番号とアドレス欄にリセットしてください。

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>

Answer 3

あなたがphoneとaddress要素にdisplay: inline-blockを適用することができます：

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

自然

のは、彼らがに設定されている親要素の幅全体にわたって延びるDIVが、この場合、私たちは彼らが占有するスペースだけを取る必要があり、インライン要素のように流れます。