如何在 html 和 css 中將標題居中並在圖像上彈出文本

Question

我目前正在嘗試第一次編寫網站代碼，並且遇到了一個問題，即當我嘗試在圖庫中為圖像添加標題並添加一個不在圖像下方居中的彈出信息幻燈片時，但它位於圖像的右側。 圖片應該總是有一個標題，當你滾動圖片時，一個文本框應該會上升，以便閱讀描述。 我不太確定如何解決這個問題，因為我認為我已經將文本居中。 如果有人可以幫助我，我將不勝感激。

    <div class="row1">
  <div class="column1">
    <img src="img/hi_bild.jpg" height="200px" width="200px">
    <figcaption> John Smith</figcaption>
    <div class="text">
      <p>This is a cat</p>
      <span class="arrow-link">ARROW IMG HERE</span>
    </div>
  </div>
  <div class="column1">
    <img src="img/hi_bild.jpg" height="200px" width="200px">
    <div class="text">
      <p>This is a cat</p>
    </div>
  </div>
  <div class="column1">
    <img src="img/hi_bild.jpg" height="200px" width="200px">
    <div class="text">
      <p>This is a cat</p>
    </div>
  </div>
</div>

https://jsfiddle.net/b0gdpmjw/

帶標題的圖片

帶有標題和彈出描述的圖像

Answer 1

位置：絕對； 和 flexbox 結構，會做你想做的事。

https://www.w3schools.com/css/css3_flexbox.asp https://www.w3schools.com/css/css_positioning.asp

Answer 2

解決方案是為 .text 指定從左到右的位置。

（tipp：我認為從bootstrap開始是個好主意。使用bootstrap你可以相對容易地建立一個網站的基本框架，這樣它也可以在智能手機上運行。之后你可以根據自己的喜好自定義一切。到自己構建網站的基本框架並使其對不同的設備做出響應對於初學者來說是非常困難的。所以你從一個大問題跑到下一個大問題。最新的當你從媒體查詢開始時，你幾乎無法跟蹤它全部。）

 figcaption { color: white; font-style: oblique; position: relative; text-align: center; } * { box-sizing: border-box; } .column1 { position: relative; width: 200px; height: 300px; overflow: hidden; } p { color: black; /* changed to black, so you can see the text */ font: 25px Sulphur Point, sans-serif; } .text { position: absolute; bottom: 0; /* right: 0;*/ left: 0; /* here */ width: 200px; height: 0; text-align: center; transition: height 0.7s ease-out; } .column1:hover>.text { height: 150px; } .column1 { float: left; width: 33.33%; padding: 5px; margin-bottom: 50px; } /* Clearfix (clear floats) */ .row1::after { content: ""; clear: both; display: table; margin-bottom: 50px; }

 <div class="row1"> <div class="column1"> <img src="img/hi_bild.jpg" height="200px" width="200px"> <figcaption> John Smith</figcaption> <div class="text"> <p>This is a cat</p> <span class="arrow-link">ARROW IMG HERE</span> </div> </div> <div class="column1"> <img src="img/hi_bild.jpg" height="200px" width="200px"> <div class="text"> <p>This is a cat</p> </div> </div> <div class="column1"> <img src="img/hi_bild.jpg" height="200px" width="200px"> <div class="text"> <p>This is a cat</p> </div> </div> </div>