如何在图像上制作一条短的水平线？

Question

我正在尝试在图像上绘制一条短的水平线。就像引号，水平线和作者姓名一样。下面是我要尝试的示例。

如何在html CSS中实现此目标？

Answer 1

您可以使用带边框的hr或div。我举了一个简单的例子，希望对您有所帮助。

html, body{
 height: 100%
}

body{
 background: lightslategray;
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0;
}

.quote {
  background: url('http://lorempixel.com/g/600/200/abstract/?random=true');
  color: white;
  background-size: cover;
  padding: 2rem;
  text-align: center;
}

hr {
  width: 40%;
}

<div class="quote">
  <h1>A dream doesn't become reality through magic<br/> it takes sweat, determination and hard work.</h1>
  <hr />
  <h2>Colin Powell</h2>
</div>

Answer 2

您可以在html <hr>中使用水平线

Answer 3

您可以通过多种方式进行操作。如何进行取决于您要完成的工作。这有两种方法：一个使用br元素，另一个使用div（也可以是标签）。如果您想使用其他颜色并为其添加更多样式，则可以使用div

.motto, .author{
      display: block;
      text-align: center;
    }
    .motto{
      font-size: 1.85em;
    }
    .br{
      width: 50%;
      height: 2px;
      margin: 25px auto;
      border-radius: 2px;
      background-color: #0088ee;
    }

<i class="motto">It is better to be feared than loved if you cannot be both</i>

<div class="br"></div>
<!-- <hr/> -->

<strong class="author">Niccolo Machiavelli</strong>

注释<div class="br"></div>和取消注释<hr/>，以查看两个结果。