页脚中的文本不会与底部居中对齐

debugcn 发表于 Dev

如标题所示，我正在尝试在页脚中对齐文本，使其水平居中并与底部对齐。

阅读其他解决方案后，我尝试将父div设置为相对，将p元素设置为绝对，然后设置bottom：0； / vertical-align：bottom；但是不起作用。

发生的情况是文本上移到上面的div中，并且不再水平居中。

/*Section3*/
#section3 {
  height: 50%;
  background: #6ed3cf;
  text-align: center;
  padding: 0 0 0.5em;
  height: 20em;
}

#section3 h2 {
  font-size: 2em;
  font-weight: 200;
}

#section3 i {
  padding: 0.5em;
  color: black;
}

/*Footer*/
#footer {
  background:#fff;
  color: black;
  height: 10%;
  font-family: 'Open Sans', sans-serif;
  position: relative;
  display: table;
}

#footer p {
  font-size: 0.7em;
  text-align: center;
  position: absolute;
  bottom: 0;
  vertical-align: bottom;
}

<div id="section3" style="display:flex;justify-content:center;align-items:center;">
	<div>
		<h2>header</h2>	
		<div class="container">
			<div class="row">
				<div class="col-md-6 col-md-offset-3">
					<p>blablablablablablablablablablablablablablablablablablablablabla</p>
					<a href="#"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></a>	
					<a href="#"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i			></a>		
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Footer -->
<div id="footer">
	<div class="container">
		<div class="row">
			<div class="col-md-4 col-md-offset-4">
				<p>text</p>	
			</div>
		</div>
	</div>
</div>

克里斯

我对您的组件上的某些属性有些困惑，但是这是我会做的：

从元素position: absolute上删除<p>，然后display: table从中删除<footer>。

像这样：

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  min-height: 100%;
}

/*Section3*/

#section3 {
  height: 50%;
  background: #6ed3cf;
  text-align: center;
  padding: 0 0 0.5em;
  height: 20em;
}

#section3 h2 {
  font-size: 2em;
  font-weight: 200;
}

#section3 i {
  padding: 0.5em;
  color: black;
}


/*Footer*/

#footer {
  background: #fff;
  color: black;
  height: 10%;
  font-family: 'Open Sans', sans-serif;
  position: absolute;
  width: 100%;
  bottom: 0;
}

#footer div {
  height: 100%;
}

#footer .row > div {
  width: 100%;
  display: table;
}

#footer p {
  display: table-cell;
  font-size: 0.7em;
  text-align: center;
  bottom: 0;
  vertical-align: bottom;
}

<div id="section3" style="display:flex;justify-content:center;align-items:center;">
  <div>
    <h2>header</h2>
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <p>blablablablablablablablablablablablablablablablablablablablabla</p>
          <a href="#"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></a>
          <a href="#"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i			></a>
        </div>
      </div>
    </div>
  </div>
</div>


<!-- Footer -->
<div id="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-md-offset-4">
        <p>text</p>
      </div>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。