如何在图像和文本之间创建一条水平线

Question

我正在尝试使用html和css在图像和文本之间创建一条水平线。

图像在屏幕的最左侧，文本在屏幕的最右侧。然后，水平线插入“在中间”和“垂直对齐中心”

我现在面临一个非常奇怪的问题。 1.如果我将hr的宽度增加超过80％，则其旁边的文本将被换成新行

1. 如果我按比例缩小屏幕，旁边的文本也会换成新行，那么如何在不换行的情况下使它具有响应性。

我对html和css很陌生，请kinldy建议，我已经尝试在论坛上阅读和找到解决方案，这似乎很难理解并且难以应用

我对html和css很陌生，请kinldy建议，我已经尝试在论坛上阅读和找到解决方案，这似乎很难理解并且难以应用

hr{
display: inline-block;
margin:auto;
width:80%;
}

img {
vertical-align: middle;
display: inline-block;
height: 70px;
width: 70px;
border: 1px solid red;
}

p {
display: inline-block;
vertical-align: middle;
}

<img src ="example" alt="Product Image"><p>Healthy Cake</p><hr><p style="padding: 10px; background-color: green;">Promotional Price</p>
</html>

Answer 1

hr应该用于垂直而不是水平地划分元素，但是您可以在包装器上使用flexbox对其进行管理

.wrap {
  display: flex;
  align-items: center ;
}

hr {
  flex:1
}

<div class="wrap">
<img src="http://www.fillmurray.com/g/140/100" alt="">
  <hr>
  <p>Product Description</p>
</div>

Answer 2

尝试一下，这可能会解决您的问题，

将margin-top: 25px;添加到您的<hr>样式，并将margin-top: 0px;添加到您的<h2>样式

我尝试了上述样式，并且得到了以下屏幕截图。