垂直對齊圖像上的文本

我知道這個問題已被問了很多，但我一直沒能找到答案中的解決方案。我正在嘗試在圖片中居中放置文字，但我在垂直對齊方面遇到了一些麻煩。這是我的代碼：垂直對齊圖像上的文本

<div class="col-sm-12 col-md-12 col-lg-12 main_category_container"> 
    <div class="col-sm-4 col-md-4 col-lg-4"> 
     <div class="wrap"> 
      <h3 class="sub_category_title"><a href="some link">Centered text</a></h3> 
      <a href="some link"><img src="some image"></a> 
     </div> 
    </div> 
</div>

和

.wrap { 
height:auto; 
margin: auto; 
text-align:center; 
position:relative; 
} 

h3.sub_category_title { 
vertical-align: middle; 
}

眼下文本圖像上方水平居中，但我無法弄清楚如何垂直對齊圖像的中間。

提前致謝！

來源

2017-07-17 Mewb

文字和圖片都有'href'。如果您將標題垂直對齊，您是否認爲這可能會導致混淆哪個元素用於哪個鏈接？ – Nimish

他們都指向相同的鏈接。我已經嘗試過一些類似的東西，只是一個沒有鏈接的h3，但我認爲你不能直接點擊文本有點混亂。有沒有更好的方法來做到這一點？我很新:) – Mewb

通常，如果您嘗試將一個元素與另一個元素重疊，則最終會使用position: absolute或position: relative - 否則，內容自然會排列在區塊流中。

你可以嘗試這樣的事：

.image-wrapper { 
 
    position: relative; 
 
    text-align: center; 
 
    
 
    width: 300px; /* change or remove as needed */ 
 
    margin: auto; 
 
} 
 

 
.image-link { display: block; } 
 

 
.image-text { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    
 
    /* The rest of this is just for this demo, 
 
    you can change it for your situation. */ 
 
    
 
    font-weight: bold; 
 
    color: white; 
 
    font-family: sans-serif; 
 
    background: rgba(0, 0, 0, 0.5); 
 
}

<div class="image-wrapper"> 
 
    <a class="image-link" href="#"> 
 
    <img class="image" src="http://loremflickr.com/300/200" alt="kitten!"> 
 
    <h3 class="image-text">A Centered Label</h3> 
 
    </a> 
 
</div>

來源

2017-07-17 19:54:11 jack

完美的工作:)謝謝傑克！ – Mewb

垂直對齊圖像上的文本

回答

相關問題