html - CSS在图片前后添加一行

This question already has answers here:

Line before and after title over image [duplicate]
（2个答案）
三年前关闭。
我有这样一个形象：

<a href="#landing">
  <img src="button.png" style="display:block; margin-top:10px; margin:0 auto;" />
</a>

我想做的是在图像前后加一条线，图像居中。
就像这样：
-------------------图像---------------------
我很难理解整件事。我的问题是如何在图像前后添加一行。

最佳答案

您可以使用Flexbox来完成此操作。您可以垂直居中img和align-items: center的线条，也可以垂直居中flex: 1:before和:after的线条将占用剩余宽度。

a {
  display: flex;
  align-items: center;
}
a:before,
a:after {
  flex: 1;
  content: '';
  height: 1px;
  background: black;
}

<a href="">
  <img src="http://placehold.it/100x100">
</a>

关于html - CSS在图片前后添加一行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36203780/