Question

我试图用下面的CSS制作一个边框，它有一个小的三角形图标CSS，需要精确居中于div的边界线。如果我使用float:right或左箭头图标移到边界线的任一端，我可以将其设置为居中，如果可能的话，将其作为响应式设计粘贴到边界线。

＆＃13;

.center {
  text-align: center;
  border: 3px solid green;
}
.arrow-down { 
  width: 0;
  height: 0;
  border-left: 10px solid rgba(30, 7, 7, 0);
  border-right: 10px solid transparent;
  border-top: 10px solid #f00;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="center">
    <p>This text is centered.</p>
  </div>
  <div class="arrow-down"></div>

  <div class="center">
    <p>This second text is centered.</p>
  </div>
  <div class="arrow-down"></div>

  <div class="center">
    <p>This third text is centered.</p>
  </div>
  <div class="arrow-down"></div>
</body>
</html>

＆＃13;

Answer 1

您可以设置margin-left: 50%将其置于中心位置，并设置margin-top: -3px将其移到上一个元素的边框上。

＆＃13;

.center {
  text-align: center;
  border: 3px solid green;
  
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 10px solid rgba(30, 7, 7, 0);
  border-right: 10px solid transparent;
  border-top: 10px solid #f00;
  margin-top: -3px;
  margin-left: 50%;
}

＆＃13;

<div class="center">
  <p>This text is centered.</p>
</div>
<div class="arrow-down"></div>

<div class="center">
  <p>This second text is centered.</p>
</div>
<div class="arrow-down"></div>

<div class="center">
  <p>This third text is centered.</p>
</div>
<div class="arrow-down"></div>

＆＃13;

Answer 2

使用 CSS定位，并使用CSS的calc()功能从顶部进行调整。即100% - 3px（这是你的边框宽度）

请看下面的代码段：

＆＃13;

.div-container {
    position: relative;
    margin-bottom: 10px;
}

.center {
    text-align: center;
    border: 3px solid green;
}

.arrow-down{
    position: absolute;
    top: calc(100% - 3px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid rgba(30, 7, 7, 0);
    border-right: 10px solid transparent;
    border-top: 10px solid #f00;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="div-container">
  <div class="center">
    <p>This text is centered.</p>
  </div>  
  <div class="arrow-down"></div>
</div>

<div class="div-container">
  <div class="center">
    <p>This second text is centered.</p>
  </div>
  <div class="arrow-down"></div>
</div>

<div class="div-container">
  <div class="center">
    <p>This third text is centered.</p>
  </div>
  <div class="arrow-down"></div>
</div>

</body>
</html>

＆＃13;

希望这有帮助！

Answer 3

将箭头放在.center中并用
指定其位置 position:absolute; top: 100%; left: 48%;

.center {
  text-align: center;
  border: 3px solid green;
  position: relative;
  margin-top:10px;
}
.arrow-down {
  width: 0;
  height: 0;
  border-left: 10px solid rgba(30, 7, 7, 0);
  border-right: 10px solid transparent;
  border-top: 10px solid #f00;
  position: absolute;
  top: 100%;
  left: 48%;
}

<div class="center">
  <p>This text is centered.</p>
  <div class="arrow-down"></div>
</div>
<div class="center">
  <p>This second text is centered.</p>
  <div class="arrow-down"></div>
</div>
<div class="center">
  <p>This third text is centered.</p>
  <div class="arrow-down"></div>
</div>

Answer 4

.center {
  text-align: center;
  border: 3px solid green;
  margin-bottom: 20px;
}
.arrow-down { 
  position: absolute;
  width: 0;
  height: 0;
  left: 45%;
  border-left: 10px solid rgba(30, 7, 7, 0);
  border-right: 10px solid transparent;
  border-top: 10px solid #f00;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <div class="center">
    <p>This text is centered.</p>
    <div class="arrow-down"></div>
  </div>

  <div class="center">
    <p>This second text is centered.</p>
    <div class="arrow-down"></div>
  </div>

  <div class="center">
    <p>This third text is centered.</p>
    <div class="arrow-down"></div>
  </div>
  
</body>
</html>

Answer 5

最好的方法，通过使用margin: 0 auto;来实现这一点，并坚持边界线作为响应式设计。 margin: 0 auto;表示：

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

.center {
    text-align: center;
    border: 3px solid green;
}
   .arrow-down{ width: 0;
    height: 0;
    border-left: 10px solid rgba(30, 7, 7, 0);
    border-right: 10px solid transparent;
    border-top: 10px solid #f00;
    margin: 0 auto;
    }

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="center">
  <p>This text is centered.</p>
</div>
<div class="arrow-down"></div>

<div class="center">
  <p>This second text is centered.</p>
</div>
<div class="arrow-down"></div>

<div class="center">
  <p>This third text is centered.</p>
</div>
<div class="arrow-down"></div>
</body>
</html>

Answer 6

我稍微修改了一下HTML。在目前的箭头中，箭头位于绝对位置，它可以完美地居中对齐任何大小的容器div.center

.center {
  margin-bottom: 20px;
  text-align: center;
  border: 3px solid green;
  position: relative;
}
.arrow-down { 
  width: 0;
  height: 0;
  border-left: 10px solid rgba(30, 7, 7, 0);
  border-right: 10px solid transparent;
  border-top: 10px solid #f00;
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="center">
    <p>This text is centered.</p>
    <div class="arrow-down"></div>
  </div>

  <div class="center">
    <p>This second text is centered.</p>
    <div class="arrow-down"></div>
  </div>

  <div class="center">
    <p>This third text is centered.</p>
    <div class="arrow-down"></div>
  </div>
</body>
</html>

Answer 7

＆＃13;

.center {
  text-align: center;
  border: 3px solid green;
  position : relative;
  margin-bottom : 30px;
}

.center:before {
  width: 0;
  height: 0;
  border-left: 10px solid rgba(30, 7, 7, 0);
  border-right: 10px solid transparent;
  border-top: 10px solid #f00;
  position: absolute;
  content: '';
  bottom: -10px;
}

＆＃13;

<div class="center">
  <p>This text is centered.</p>
</div>

<div class="center">
  <p>This second text is centered.</p>
</div>

<div class="center">
  <p>This third text is centered.</p>
</div>

＆＃13;

如何将箭头图标粘贴到线上

7 个答案: