텍스트 블록 앞에 아이콘을 중앙에 배치하여 텍스트에 한 단어 또는 여러 줄이 포함 된 경우 항상 텍스트 블록 앞에 세로로 가운데에 배치됩니다.
.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>이 방법으로 시도하십시오.
.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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다