Question

我有一个页脚，我想将所有文本（电话号码，地址等）对齐在同一行，以及要在地平线上显示的信息。我如何使用CSS，或者我需要使用其他东西？这是我的HTML。

（并非＆amp; nbsp用于对齐电话号码。这就是CSS。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以将手机和地址div设置为inline-block，然后在页脚上使用text-align: center。然后重置电话上的text-align: left，如果您不希望该文字居中，请说明div。

＆＃13;

 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;
 }

＆＃13;

<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>

＆＃13;

您也可以在页脚上使用display: flex; justify-content: center;。

＆＃13;

 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;
 }

＆＃13;

<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>

＆＃13;

Answer 2

使用display flex和align-items：center for middle ..删除那些br标签

＆＃13;

  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;
 }

＆＃13;

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

＆＃13;

Answer 3

您可以将display: inline-block应用于phone和address元素：

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

自然div扩展了它们所设置的父元素的整个宽度，但在这种情况下，我们需要它们只占用它们占用的空间，并像内联元素一样流动。

HTML页脚中的中心文本

3 个答案: