Question

我需要在链接后面添加居中的水平线，所以当我改变屏幕的大小时，这条线会保持在链接后面的中心并随之移动。另外，我需要这条线在屏幕的整个宽度上。

第一张图片就是我现在所拥有的：

在第二张图像上是我需要的，因为你可以看到以“V”链接为中心的细灰线：

此链接的html代码：

<div class="welcome-content">
            <h1 class="welcome-text">Welcome To Kramerica Industries</h1>
            <div class="explore-container">
                <a class="v-explore-button" href="#about"><i class="fa fa-angle-down fa-lg" aria-hidden="true"></i></a>
                <p class="explore-text">Explore</p>
            </div>
        </div>

我的萨斯：

 .welcome-text {
    text-align: center;
    font-family: "Droid Sans Bold", "sans-serif";
    color: #ffffff;
  }

  .explore-container {
    position: absolute;
    top: 147%;
    left: 38%;



    .v-explore-button {
      text-decoration: none;
      color: #ffffff;
      background-color: #2ecc71;
      padding: 15px 20px;
      border-radius: 100%;
    }

    .explore-text {
      margin-top: 20px;
      color: #ffffff;
    }
  }

Answer 1

＆＃13;

body{
  background-color: black;
}

.welcome-text {
  text-align: center;
  font-family: "Droid Sans Bold", "sans-serif";
  color: #ffffff;
}

.explore-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.v-explore-button {
  display: flex;
  align-items: center;
  position: relative;
  text-decoration: none;
  color: #ffffff;
  background-color: #2ecc71;
  padding: 15px 20px;
  border-radius: 100%;
}

.explore-text {
  margin-top: 20px;
  color: #ffffff;
}

.explore-container:before {
  content: "";
  position: absolute;
  top: 1em;
  left: 0;
  width: 100%;
  height: .15em;
  background-color: #00bade;
}

.inner-wrap{
  margin-right: 38%;
}

＆＃13;

<div class="welcome-content">
  <h1 class="welcome-text">Welcome To Kramerica Industries</h1>
  <div class="explore-container">
    <div class="inner-wrap">
      <a class="v-explore-button" href="#about"><i class="fa fa-angle-
      down fa-lg" aria-hidden="true"></i></a>
      <p class="explore-text">Explore</p>
    </div>
  </div>
</div>

＆＃13;

我的建议是使用之前的伪元素：请参阅解决方案的示例。如果这有帮助，请告诉我。

Answer 2

您可以使用translate属性来对齐内部的元素容器在中间，如下所示，无需计算近似％值以对齐它。
不要向左前方38%添加explore-container，而是将其宽度设置为100％并使用text-align:center对齐元素，如下所示。

我希望这会有所帮助。

.welcome-text {
  text-align: center;
  font-family: "Droid Sans Bold", "sans-serif";
}

.explore-container {
  position: absolute;
  top: 147%;
  margin:0 auto;
  width:100%;
  text-align:center;
  }
  
  .v-explore{
    position:relative;
    background:yellow;
  }
  
  .v-explore-button {
    text-decoration: none;
    background-color: #2ecc71;
    color:#ffffff;
    padding: 15px 20px;
    border-radius: 100px;
    position:absolute;
    top:50%;
    transform: translate(-50%, -50%);
  }
  
  
  .explore-text {
    margin-top: 20px;
  }

<div class="welcome-content">
  <h1 class="welcome-text">Welcome To Kramerica Industries</h1>
  <div class="explore-container">
    <div class="v-explore">
    <a class="v-explore-button" href="#about">v</a>
    <hr>
    </div>
    <p class="explore-text">Explore</p>
  </div>
</div>

Answer 3

如果使用:: inline block pseudoelement for button class with transform with transform：translateY（按钮宽度的50％）;以及100％宽度？

如何使用css在链接后面添加居中的水平线？

3 个答案: