如何使用 HTML 和 CSS 正确设置网页页脚部分的文本对齐格式答案

【问题标题】：How to correctly format text alignment for the footer section of a webpage with HTML and CSS如何使用 HTML 和 CSS 正确设置网页页脚部分的文本对齐格式
【发布时间】：2021-02-21 23:57:42
【问题描述】：

我正在尝试格式化网页的页脚部分，以便地址及其相应信息与联系信息平行。基本上，所有地址信息都在左侧，联系信息在右侧，并且理想情况下统一对齐。我尝试更改一些参数并添加参数以尝试更正格式。

这是我得到的输出。

关于如何纠正这个问题的任何建议？这是上下文的代码。

HTML

<!DOCTYPE html>
<html>
<div class="footer-row">
<div class="footer-left">
    <h1>Address</h1>
    <p><strong>Name of place</strong><br>
       <em>at the intersection of such and such</em><br>
       111 address st <br>
       City Name, State 12345 <br>
    </p>
</div>
<div class="footer-right"></div>
    <h1>Contact</h1>
    <p>
       111-222-3333 <br>
       email@email.com<br>
    </p>
</div>
</div>
</html>

CSS

.footer-row{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.footer-left,.footer-right{
    flex-basis: 45%;
    padding: 10px;
    margin-bottom:20px;
}
.footer-right{
    text-align: right;
}

.footer-row h1{
    margin: 10px 0; 
}

.footer-row p{
    line-height: 25px;
}

【问题讨论】：

标签： html css formatting footer

【解决方案1】：

添加flex-direction: column; 和删除 div 结束标记在

<div class="footer-right"></div>

.footer-row{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    
    flex-direction: row;
}
.footer-left,.footer-right{
    flex-basis: 45%;
    padding: 10px;
    margin-bottom:20px;
}
.footer-right{
    text-align: right;
}

.footer-row h1{
    margin: 10px 0; 
}

.footer-row p{
    line-height: 25px;
}

<div class="footer-row">
  <div class="footer-left">
      <h1>Address</h1>
      <p><strong>Name of place</strong><br>
         <em>at the intersection of such and such</em><br>
         111 address st <br>
         City Name, State 12345 <br>
      </p>
  </div>
  <div class="footer-right">
      <h1>Contact</h1>
      <p>
         111-222-3333 <br>
         email@email.com<br>
      </p>
  </div>
</div>

【讨论】：

主要问题是那个额外的标签。感谢您的建议。
很高兴能帮上忙

【解决方案2】：

您可以使用display-grid css。当您学会使用时，您永远不会使用其他方式；）

你可以这样使用：

.footer-row {
  display: inline-grid;
  width: 100%;
  grid-auto-flow: column;
}

见JsFiddle

【讨论】：

不错！我会试试看。

【解决方案3】：

你的 css 是绝对正确的，不需要添加任何规则。问题是html结构。删除<div class = "footer-right"> 之后的结束</div> 标记就足够了——这是唯一的问题。

我为你添加了一个 515px media query，它可以对齐内容。

.footer-row{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.footer-left,.footer-right{
    flex-basis: 45%;
    padding: 10px;
    margin-bottom:20px;
}
.footer-right{
    text-align: right;
}

.footer-row h1{
    margin: 10px 0; 
}

.footer-row p{
    line-height: 25px;
}

@media(max-width: 515px){
    .footer-row{
      justify-content: center;
  }
    .footer-right{
    text-align: left;
}
}

<!DOCTYPE html>

<div class="footer-row">
  <div class="footer-left">
      <h1>Address</h1>
      <p><strong>Name of place</strong><br>
         <em>at the intersection of such and such</em><br>
         111 address st <br>
         City Name, State 12345 <br>
      </p>
  </div>
  <div class="footer-right">
      <h1>Contact</h1>
      <p>
         111-222-3333 <br>
         email@email.com<br>
      </p>
  </div>
</div>

【讨论】：

非常有助于确保网页在移动设备上的格式正确！

【解决方案4】：

因此，您应该做的第一件事是在“footer-right”类的末尾删除，并确保正确地将元素包装在它下面。其次，您只需要 CSS 中的这段代码即可为您提供所需的响应式页脚。

.footer-row {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

<!DOCTYPE html>
<html>
<div class="footer-row">
<div class="footer-left">
    <h1>Address</h1>
    <p><strong>Name of place</strong><br>
       <em>at the intersection of such and such</em><br>
       111 address st <br>
       City Name, State 12345 <br>
    </p>
</div>
<div class="footer-right">
    <h1>Contact</h1>
    
    <p>
       111-222-3333 <br>
       email@email.com<br>
    </p>
    </div>
  </div>

</html>

【讨论】：

我尝试了您的建议，但是省略“margin: 0 auto”会导致格式偏离中心。