如何在html中的影像中間放置文本？-有解無憂

這是我的 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>

下圖顯示了我想要實作的目標

如何在 html 中的影像中間放置文本？

uj5u.com熱心網友回復：

試試這個，它應該可以作業：

<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>

uj5u.com熱心網友回復：

您需要使用justify-content和align-items操作.content選擇器中子項的定位。設定justify-content要left與align-items以center

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

uj5u.com熱心網友回復：

從技術上講，這是一個 CSS 問題，而不是一個 HTML 問題。CSS 與您網頁的樣式有關，因此您的問題是在 CSS 領域，而不是 HTML，它只描述內容和結構。

我會這樣做的方式是

將 position 屬性設定為 absolute - 這允許定位在正常內容流之外
將文本的左側放在其父級的水平中間（在您的情況下是它所在的 div）
將文本向左平移 50% 的寬度，使文本中間居中，而不是左側。

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

uj5u.com熱心網友回復：

有幾種方法可以做你想做的事

最好的方法可能是使用您的徽標作為背景圖片

.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 并根據需要放置它們

.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>

uj5u.com熱心網友回復：

這是方法，只需將邊距設定為auto. 請記住，第一個值是向上和向下，第二個是向左和向右

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>
    </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/387183.html

標籤：html css

上一篇：連續兩個元素，一個左對齊，一個居中，如何？[復制]

下一篇：檢查插入的ID是否已經存在