我试图将图标置于文本块之前,这样如果文本包含一个字或多行,它将始终在文本块之前垂直居中。
.box {
padding: 20px;
height: auto;
width:30%;
}
.headline {
position: relative;
padding: 0 0 0 70px;
font-size: 22px;
line-height: 1.5;
margin:: 40px 0;
color: #000;
}
.headline::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 60px;
height: 60px;
background: url('http://icons.veryicon.com/ico/Internet%20%26%20Web/Browsers%202/Google%20Chrome.ico') top right no-repeat;
background-size: cover;
}
<div class="box">
<h1 class="headline">Headline: your address is blalalaslsakdlpdslasddas/h1>
</div>
答案 0 :(得分:2)
以这种方式试试。
.box {
padding: 20px;
height: auto;
width:30%;
}
.headline {
padding: 0 0 0 70px;
font-size: 22px;
line-height: 1.5;
margin:: 40px 0;
color: #000;
background: url('http://icons.veryicon.com/ico/Internet%20%26%20Web/Browsers%202/Google%20Chrome.ico') no-repeat;
background-size: 60px 60px;
background-position: 0 center;
}
<div class="box">
<h1 class="headline">Headline: etiam porta sem male suada magna</h1>
</div>
答案 1 :(得分:1)
在这里使用top: calc(50% - 30px);
30 = height/2;
.box {
padding: 20px;
height: auto;
width:30%;
}
.headline {
position: relative;
padding: 0 0 0 70px;
font-size: 22px;
line-height: 1.5;
margin:: 40px 0;
color: #000;
}
.headline::before {
content: '';
position: absolute;
left: 0;
top: calc(50% - 30px);
width: 60px;
height: 60px;
background: url('http://icons.veryicon.com/ico/Internet%20%26%20Web/Browsers%202/Google%20Chrome.ico') top right no-repeat;
background-size: cover;
}
<div class="box">
<h1 class="headline">Headline: your address is blalalaslsakdlpdslasddas</h1>
</div>
答案 2 :(得分:-1)
你在寻找这样的东西吗?
.box {
padding: 20px;
height: auto;
width:30%;
}
.headline {
position: relative;
padding: 0 10px;
font-size: 22px;
line-height: 1.5;
margin: 40px 0;
color: #000;
width: 100%;
}
.headline::before {
content: '';
position: absolute;
right: 0;
margin: auto;
left: 0;
bottom: 0;
top: 0;
width: 60px;
height: 60px;
background: url(https://markwarrick.com/wp-content/uploads/2014/07/sample-icon.png) top right no-repeat;
background-size: cover;
}
<div class="box">
<h1 class="headline">Headline: your address is blalalaslsakdlpdslasddas</h1>
</div>