如何對齊圖像中心的文本

Question

我試圖在 div 中居中文本，這個 div 包含一個圖像 + 另一個 div，其中包含需要居中的文本。

見下圖：

我面臨的問題是同樣在 div 中的圖像不允許我在中心勾勒出文本。

我嘗試應用填充和邊距（甚至是負數）但是沒有結果

所以現在這是我在 HTML 和 CSS 文件中的代碼：

 .destinations { padding: 5px 15px; } .destinations img { max-width: 100%; max-height: 100%; border-radius: 10px; } .flex-item { width: 290px; height: auto; border-radius: 10px; margin: auto; } .flex-item-title { text-align: center; color: white; background-color: black; opacity: 0.8; }

 <div class="destinations"> <div class="flex-item"> <img src="assets/img/wassenaar.jpg"> <div class="flex-item-title">Wassenaar</div> </div> </div>

我希望你能幫助我

Answer 1

這是將文本在圖像上垂直和水平居中的一種方法：

 .destinations { padding: 5px 15px; } .destination { width: 290px; height: 290px; display: flex; border-radius: 10px; margin: auto; background-image: url("https://placekitten.com/500/500"); justify-content: center; align-items: center; } .title { text-align: center; color: white; background-color: black; opacity: 0.8; }

 <div class="destinations"> <div class="destination"> <div class="title">Wassenaar</div> </div> </div>

Answer 2

您可以使用以下 css 解決您的問題。

.flex-item{
     width:300px;
     height:200px;
     position: relative;
        padding: 0;
        margin: 0;
        text-align: center;
    }


    .flex-item-title{
 position: absolute;
        top: 0; right: 0;
        bottom: 0; left: 0;
        width: 300px;
        height: 200px; 
        text-align: center;
            color: white;
            display: inline-table;
           vertical-align:middle;
           line-height:100%;            
        }

嘗試將您的 css 更改為此 css，它會起作用。