Question

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

SECTION1

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

SECTION3

<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

试试这个：

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

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

Answer 2

使用弹性框并对齐其末尾的图标

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

#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

如何将我的图标放在网页的底部中心？

3 个答案: