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

Question

正如标题所暗示的那样，我试图将我的页脚中的文本对齐为水平居中并与底部对齐。

读过其他的解决方案后，我试图将父div设置为relative，将p元素设置为absolute，然后设置为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>

Answer 1

当我给出宽度时，它对我有用：100％;到我的页脚属性。如果你这样做，那么文本将自己对齐到中间。 PS，我的声誉不允许我添加评论...

Answer 2

我对您组件的某些属性感到有点困惑，但这就是我要做的事情：

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

像这样：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

请为#footer的P元素添加宽度样式如下：

DECIMAL(7,6)

如果您有任何问题，请告诉我。 感谢...

Answer 4

你试试这个。

#footer {
  background:#fff;
  color: black;
  height: 10%;
  font-family: 'Open Sans', sans-serif;
  position: relative;
  display: table;
  width: 100%;
  text-align: center;
}

这对我有用。

Answer 5

看看这是否能解决你的目的

＆＃13;

＆＃13;

#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; */
    background: #6ed3cf;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;