Wie kann ich einen Text innerhalb eines Bildes zentrieren (sowohl vertikal als auch horizontal), sowohl innerhalb eines Tags als auch innerhalb eines <a> Tags?

Question

Dies ist der Code, den ich verwende. Wenn ich .thumb-title als absolute mit bottom: 50% positioniere, verschiebt es es relativ zu seiner eigenen Höhe.

.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

Wenn der Daumen eine bekannte Breite hat, dann kann man display:inline-block;, vertical-align:middle, text-align:center; und eine negative margin verwenden. Dies kann absolute und transform vermeiden.

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

---

Edit: sieht aus wie Sie eine andere Antwort kommentiert, wo man über eine Flex-Box gesprochen? hier eine Flex-Version, aber nur eine Vermutung von Ihrem realen Layout & 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

Sie müssen die text-align: center; auf den .project-thumb und die left: 50%; Regel mit der transform: translate(-50%,-50%); Regel für die .thumb-title verwenden, wie folgend :

.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/NzD4PePD6vMCDe0H2NiTwtdY7DQsCSSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJhnbevL/DLgsBfMwfCIgeLDnhUYwAAAABJRU5ErkJggg=="> 
 
    <h3 class="thumb-title">Sample text</h3> 
 
    </a> 
 
</li>

Answer 3

Danke für die Hilfe! Art der getesteten Stücke und hier ist was für mich gearbeitet:

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