如何在 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>