如何在 html 中将文本放在图像中间？

Question

这是我的 html 代码

<div class="container">
    <div class="box">
        <div class="content" style="display: flex">
            <img src="/img/logo.png">
            <p style="margin-left: 40px">YukinoMusic</p>
        </div>
    </div>
</div>

下图显示了我想要实现的目标

Answer 1

您需要使用justify-content和align-items从.content选择器中操纵子项的定位。 将justify-content设置为left并将align-items设置为center

.content {
  justify-content: left;
  align-items: center;
}

Answer 2

试试这个，它应该工作：

<div class="container">
  <div class="box">
    <div class="content" style="display: flex; align-items:center;">
      <img src="/img/logo.png">
      <p style="margin-left: 40px">YukinoMusic</p>
    </div>
  </div>
</div>

Answer 3

有几种方法可以做你想做的事

最好的可能是使用您的徽标作为背景图片

 .container { width: 100%; height: 130px; position: relative; background-image: url("https://i.stack.imgur.com/BjC4H.png"); display: flex; justify-content: center; align-items: center; color: #ccc; font-size: 2rem;; }

 <div class="container"> YukinoMusic </div>

但您也可以根据需要使用不同的 div 和 position

 .content { position: relative; } #text { position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: flex; justify-content: center; align-items: center; font-size: 2rem; color: #ccc; }

 <div class="container"> <div class="box"> <div class="content"> <img src="https://i.stack.imgur.com/BjC4H.png"> <div id="text">YukinoMusic</div> </div> </div> </div>

Answer 4

从技术上讲，这是一个 CSS 问题，而不是 HTML 问题。 CSS is concerned with the styling of your webpage, and therefore your question is in the realm of CSS, not HTML, which only describes content and structure.

我会这样做的方式是

1. 将 position 属性设置为绝对 - 这允许在正常内容流之外定位
2. 将文本的左侧放在其父级的水平中间（在您的情况下是它所在的 div）
3. 将文本向左平移 50% 的宽度，使文本居中，而不是左侧。

 <p style="position: absolute; left: 50%; transform: translate(-50%)">"Hallo Welt"</p>

Answer 5

方法如下，只需将边距设置为auto即可。 请记住，第一个值是 up&down，第二个是 left&right

margin: up&down left&right

 body { background-color: rgb(40, 40, 40); }.content { border: solid white 2px; display: flex; }.content > img { border-radius: 50%; }.p1 { color: white; margin: 100px auto; }.p2 { color: white; margin: auto 200px;

 <div class="container"> <div class="box"> <div class="content"> <img src="https://i.pinimg.com/474x/63/a2/46/63a2469a6f9557da638b1c75d56b1554.jpg" width="200px"> <p class="p1">YukinoMusic</p> </div> <div class="content"> <img src="https://i.pinimg.com/474x/ab/63/55/ab63556093e53148bc947e63bb9b262a.jpg" width="200px"> <p class="p2">YukinoMusic</p> </div>