如何在圖像中居中（垂直和水平）文本中的文本<a>？</a>

Question

這是我正在使用的代碼。 當我將.thumb-title定位為absolute bottom: 50%它會相對於它自己的高度向上移動。

 .project-thumb { position: relative; } .thumb-title { font: 400 1.5rem'Lato', sans-serif; position: absolute; bottom: 50%; text-align: center; } 

 <li> <a class="project-thumb" href="ktc.html"> <img class="thumb" src="thumbs/thumb-201612t-ktc.jpg"> <h3 class="thumb-title">Sample text</h3> </a> </li> 

Answer 1

如果拇指具有已知寬度，則可以使用display:inline-block; ， vertical-align:middle ， text-align:center; 和負margin 。 這可以避免absolute和transform 。

 .project-thumb, .project-thumb h3 { display: inline-block; vertical-align: middle; position: relative; width: 150px;/* thumb's width */ box-sizing: border-box;/* if you add borders or padding*/ color: initial } .thumb { vertical-align: middle; margin-right: -150px;/* reduce virtually width to 0 to pull text */ } .thumb-title { z-index: 1;/* make sure it stands on top of img*/ text-align: center; } 

 <a class="project-thumb" href="ktc.html"> <img class="thumb" src="http://dummyimage.com/150x150/aaaaaa/aaaaaa&text=."><!-- mind this white space for inline-block elements, comment erase it --><h3 class="thumb-title"> Sample text</h3> </a> <a class="project-thumb" href="ktc.html"> <img class="thumb" src="http://dummyimage.com/150x150/aaaaaa/aaaaaa&text=."><!-- mind this white space for inline-block elements, comment erase it --><h3 class="thumb-title"> 2 lines <br/> of text</h3> </a> 

---

編輯：看起來你評論了另一個你在談論彈性盒子的答案嗎？ 這里是一個flex版本，但只能猜測你的真實布局和CSS

 .project-thumb, .project-thumb h3 { display: inline-flex; position: relative; width: 150px;/* thumb's width */ box-sizing: border-box;/* if you add borders or padding*/ color: initial; justify-content:center; } .thumb { margin-right: -150px;/* reduce virtually width to 0 to pull text */ } .thumb-title { z-index: 1;/* make sure it stands on top of img*/ margin:auto 0; } 

 <a class="project-thumb" href="ktc.html"> <img class="thumb" src="http://dummyimage.com/150x150/aaaaaa/aaaaaa&text=."><!-- mind this white space for inline-block elements, comment erase it --><h3 class="thumb-title"> Sample text</h3> </a> <a class="project-thumb" href="ktc.html"> <img class="thumb" src="http://dummyimage.com/150x150/aaaaaa/aaaaaa&text=."><!-- mind this white space for inline-block elements, comment erase it --><h3 class="thumb-title"> 2 lines <br/> of text</h3> </a> 

Answer 2

你需要使用text-align: center; 在.project-thumb和left: 50%; transform: translate(-50%,-50%);規則transform: translate(-50%,-50%); .thumb-title規則如下：

 .project-thumb { position: relative; display: inline-block; text-align: center; } .thumb-title { font: 400 1.5rem'Lato', sans-serif; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding:0; margin: 0; } 

 <li> <a class="project-thumb" href="ktc.html"> <img class="thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfUCAwWIxZtCx0SAAAAHXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBUaGUgR0lNUO9kJW4AAAInSURBVHhe7dXRCcMwEAXBU/rvWXZw4o/gbAUzcEgNLG//DLgsBfMwfCIgeLDnhUYwAAAABJRU5ErkJggg=="> <h3 class="thumb-title">Sample text</h3> </a> </li> 

Answer 3

感謝您的幫助！ 經過測試的點點滴滴，這對我有用：

HTML：

<li>
    <a class="project-thumb" href="ktc.html">
        <img class="thumb-img" src="thumbs/thumb-201612t-ktc.jpg">
        <h3 class="thumb-title">Sample text</h3>
   </a>
</li>

CSS：

.thumb-project {
display: inline-block;
position: relative;
}

.thumb-img {
width: 100%;
height: auto;
}

.thumb-title {
font: 400 1.2rem 'Lato', sans-serif;
position: absolute;
width: 100%;
bottom: 50%;
text-align: center;
opacity: 0;
}