如何垂直居中对齐文本与背景图像

Question

我想在列表中垂直居中对齐文本，但它目前没有正确执行。任何人都可以帮我解决这个问题吗？提前谢谢！

.lista .lista1 {
    background-image: url(http://evenimente.academiasuccesului.ro/wp-content/themes/responsive/images/1.png);
    background-repeat: no-repeat;
    line-height: 70px;
    padding-left: 80px;
    color: black;
    font-size: 18px;
    height: 68px;
}
.lista .lista2 {
    background-image: url(http://evenimente.academiasuccesului.ro/wp-content/themes/responsive/images/2.png);
    background-repeat: no-repeat;
    line-height: 70px;
    color: black;
    padding-left: 80px;
    font-size: 18px;
    height: 68px;
}
.lista .lista3 {
    background-image: url(http://evenimente.academiasuccesului.ro/wp-content/themes/responsive/images/3.png);
    background-repeat: no-repeat;
    line-height: 70px;
    padding-left: 80px;
    color: black;
    font-size: 18px;
    height: 68px;
}
.lista .lista4 {
    background-image: url(http://cristianfertea.ro/wp-content/uploads/2015/04/4.png);
    background-repeat: no-repeat;
    line-height: 70px;
    padding-left: 80px;
    color: black;
    font-size: 18px;
    height: 68px;
}
.lista {
    list-style: none;
}
.lista li {
    margin: 10px 63px;
}

<ul class="lista">
    <li class="lista1"><h5 style="/* padding-top: 25px; */">Schimbarea perspectivei in management</h5></li>
    <li class="lista2"><h5 style="padding-top: 28px;">Solutii pentru un management eficient</h5></li>
    <li class="lista3"><h5 style="padding-top: 27px;">Abordari inedite si eficiente in management si leadership</h5><p>&nbsp;</p></li>
</ul>

Answer 1

尝试在CSS中添加：

#theme-page h5 {
color: #393836;
display: inline-block;
font-size: 16px;
font-weight: bold;
line-height: 70px;
text-transform: uppercase;
vertical-align: middle;
}

Answer 2

只需删除那些h5，在这种情况下就不合适了。

.lista .lista1 {
        background-image: url(http://evenimente.academiasuccesului.ro/wp-content/themes/responsive/images/1.png);
        background-repeat: no-repeat;
        line-height: 70px;
        padding-left: 80px;
       color:black;
font-size:18px;
height:68px;
    }


.lista .lista2 {
        background-image: url(http://evenimente.academiasuccesului.ro/wp-content/themes/responsive/images/2.png);
        background-repeat: no-repeat;
        line-height: 70px;
 color:black;      
  padding-left: 80px;
font-size:18px;
height:68px;
    }


.lista .lista3 {
        background-image: url(http://evenimente.academiasuccesului.ro/wp-content/themes/responsive/images/3.png);
        background-repeat: no-repeat;
        line-height: 70px;
        padding-left: 80px;
 color:black;    
font-size:18px;
height:68px;
}

.lista .lista4 {
        background-image: url(http://cristianfertea.ro/wp-content/uploads/2015/04/4.png);
        background-repeat: no-repeat;
        line-height: 70px;
        padding-left: 80px;
 color:black;    
font-size:18px;
height:68px;
}

    .lista {

       list-style: none;   
    }  

.lista li{
	position: relative;
	margin: 10px 63px;
}

  <ul class="lista">
    <li class="lista1">Schimbarea perspectivei in management</li>
    <li class="lista2">Solutii pentru un management eficient</li>
    <li class="lista3">Abordari inedite si eficiente in management si leadership</li>
</ul>

Answer 3

以下演示是简化版本，基本上将所有相同的规则合并到一个位置，在li {...}下作为共享规则。并使用transform来定位中心部分。

<强> JSFiddle Demo

＆＃13;

＆＃13;

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
li {
    background-repeat: no-repeat;
    background-position: center left;
    font-size: 18px;
    min-height: 80px;
    position: relative;
}
li span {
    position: absolute;
    top: 50%;
    left: 80px;
    transform: translateY(-50%);
    margin: 0;
}
li:nth-child(1) {
    background-image: url("http://i.imgur.com/ZWEUAy4.png");
}
li:nth-child(2) {
    background-image: url("http://i.imgur.com/yEWagJV.png");
}
li:nth-child(3) {
    background-image: url("http://i.imgur.com/iFA9yiM.png");
}

＆＃13;

<ul>
    <li><span>Schimbarea perspectivei in management</span></li>
    <li><span>Solutii pentru un management eficient</span></li>
    <li><span>Abordari inedite si eficiente in management si leadership</span></li>
</ul>

＆＃13;

＆＃13;

＆＃13;