0
Hallo, ich bitte deine Profis um Hilfe ... Ich erstelle eine flüssige Galerie mit HTML und CSS. Ich muss Text auf Bildern hinzufügen, während sie schweben, und ich möchte, dass dieser Text horizontal und vertikal zentriert wird. Alles, was ich versuchte, scheiterte so weit wie jetzt. Im Moment ist Text auf Bildern mit absolut, aber Text ist auf der oberen linken Seite. Bitte helfen Sie!Wie zentriert man Text in einem absolut positionierten div?
body {
margin: auto;
}
.portfolio-container,
.portfolio-list {
width: 100%;
}
.portfolio-list {
margin: 0;
padding: 0;
list-style: none;
}
.portfolio-list li {
position: relative;
display: block;
float: left;
width: 25%;
}
.portfolio-list li img {
display: block;
width: 100%;
margin: 0;
vertical-align: top;
}
.portfolio-list a:after {
width: 100%;
}
.portfolio-list li img {
width: 100%;
margin: 0 auto;
}
h1,
h2 {
font-weight: normal;
}
p {
line-height: 1.5;
}
#description {
max-width: 40em;
margin: 0 auto 4.125em;
padding: 0 3%;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both
}
.group {
zoom: 1
}
#wrapper .text {
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
background: rgba(47, 193, 108, 0.6);
}
#wrapper:hover .text {
opacity: 1;
}<section class="portfolio-container group">
<ul class="portfolio-list group">
<li id="wrapper">
<img src="http://placehold.it/600x400/c69/?text=%20" class="hover">
<p class="text">text</p>
</li>
<li id="wrapper">
<img src="http://placehold.it/600x400/9c6/?text=%20" class="hover">
<p class="text">text</p>
</li>
</ul>
</section>