我怎样才能把我的图标放在网页的底部中心？

Question

这里有没有人能想出一种方法，可以将我的图标 .chevron-row 放在网页每个部分的底部中心，而无需使用 position: relative 和 position: absolute，因为它的影响。 Site code

第 1 节

<a href="#part2">
     <i class="fa fa-chevron-down fa-3x" aria-hidden="true"></i>
</a>

第 2 部分

<a href="#part3">
     <i class="fa fa-chevron-down fa-3x" aria-hidden="true"></i>
</a>

第 3 节

<a href="#part1">
     <i class="fa fa-chevron-up fa-3x" aria-hidden="true"></i>
</a>


<a href="#part2">
     <i class="fa fa-chevron-up fa-3x" aria-hidden="true"></i>
</a>

Answer 1

使用 flexbox 并在其末尾对齐图标

.section1 {
  display: flex;
  width: 100%;
  height: 200px;
  flex-wrap: wrap;
}

.section-content {
width: 100%;
}

.icon {
  text-align: center;
  width: 100%;
  align-self: flex-end;
}

.icon a {
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="section1">
  <div class="section-content">
    <h1>Heading</h1>
    <p>Paragraph</p>
  </div>
  <div class="icon">
    <a href="#part2">
      <i class="fa fa-chevron-down fa-3x" aria-hidden="true"></i>
    </a>
  </div>
</div>

Answer 2

#part1,
#part2,
#part3 {
  height: 100vh;
  width: 100%;
}

#part1 {
  background: #39A0ED;
}

#part2 {
  background: #32322C;
}

#part3 {
  background: #36F1CD;
}

.chevron-row {
  color: white;
  position: absolute;
  width: 100%;
  top: 90vh;
}

.chevron-row a {
  color: white;
}

Here is code

Answer 3

试试这个：

.chevron-row{   
color: white;
bottom: 0;
position: absolute;
width: 100%;}

https://jsfiddle.net/qu8nushL/20/

我怎样才能把我的图标放在网页的底部中心？

How can I put my icons at the bottom centre of the webpage?

jquery

html

css

twitter-bootstrap-4