垂直文本旁邊的中心圖標

我已經嘗試了下面的代碼來獲得所需的輸出，如何在中間顯示該鎖。垂直文本旁邊的中心圖標

我已經嘗試了很多東西，我發現這些東西，但沒有什麼幫助。我不是很有經驗的CSS。

我要顯示這樣的：

.inline-block { 
 
    display: inline-block; 
 
} 
 

 
.lock_image { 
 
    width: 30px; 
 
    height: 30px; 
 
} 
 

 
hr { 
 
    width: 250px; 
 
    margin: 0px; 
 
    bottom: 1px; 
 
    margin-bottom: 5px !important; 
 
    margin-top: 5px !important; 
 
} 
 

 
.title { 
 
    margin: 0px; 
 
}

<div class="inline-block"><img src="https://image.ibb.co/f7sA2Q/icons8_Lock_50.png" alt="icons8_Lock_50" border="0" class="lock_image"></div> 
 
<div class="inline-block"> 
 
    <p class="title">Google Drive Integrated Email</p> 
 
    <hr> 
 
    <a class="mgl20" href="javascript:void(0);">[email protected]</a> 
 
</div>

來源

2017-08-28 chirag satapara

我周圍添加你有內容的包裝和垂直居中對齊使其成爲flexbox。

.wrapper { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.inline-block { 
 
    display: inline-block; 
 
} 
 

 
.lock_image { 
 
    width: 30px; 
 
    height: 30px; 
 
} 
 

 
hr { 
 
    width: 250px; 
 
    margin: 0px; 
 
    bottom: 1px; 
 
    margin-bottom: 5px !important; 
 
    margin-top: 5px !important; 
 
} 
 

 
.title { 
 
    margin: 0px; 
 
}

<div class="wrapper"> 
 
    <div class="inline-block"> 
 
    <img src="https://image.ibb.co/f7sA2Q/icons8_Lock_50.png" alt="icons8_Lock_50" border="0" class="lock_image"> 
 
    </div> 
 
    <div class="inline-block"> 
 
    <p class="title">Google Drive Integrated Email</p> 
 
    <hr> 
 
    <a class="mgl20" href="javascript:void(0);">[email protected]</a> 
 
    </div> 
 
</div>

來源

2017-08-28 06:48:14 Gerard

謝謝，這是很好的，我試過'display：flex'不知道的'對齊，item'。當我允許的時候，我會接受你的 –

請inline-block類添加vertical-align:middle。

.inline-block{ 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
} 
 

 
.lock_image{ 
 
    width:30px; 
 
    height:30px; 
 
} 
 

 
hr{ 
 
    width: 250px; 
 
    margin: 0px; 
 
    bottom: 1px; 
 
    margin-bottom: 5px !important; 
 
    margin-top: 5px !important; 
 
} 
 

 
.title{ 
 
    margin:0px; 
 
}

<div class="inline-block"><img src="https://image.ibb.co/f7sA2Q/icons8_Lock_50.png" alt="icons8_Lock_50" border="0" class="lock_image"></div> 
 
<div class="inline-block"><p class="title">Google Drive Integrated Email</p><hr> 
 
    <a class="mgl20" href="javascript:void(0);">[email protected]</a> 
 
</div>

來源

2017-08-28 06:44:42

thansk，這是爲我工作 –

試試這個代碼：這裏是的jsfiddle：https://jsfiddle.net/rhulkashyap/71a9uLvy/

.inline-block{ 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
} 
 

 
.lock_image{ 
 
    width:30px; 
 
    height:30px; 
 
} 
 

 
hr{ 
 
    width: 250px; 
 
    margin: 0px; 
 
    bottom: 1px; 
 
    margin-bottom: 5px !important; 
 
    margin-top: 5px !important; 
 
} 
 

 
.title{ 
 
    margin:0px; 
 
}

<div class="inline-block"><img src="https://cdn.pbrd.co/images/GHHKwv7.png" alt="icons8_Lock_50" border="0" class="lock_image"></div> 
 
<div class="inline-block"><p class="title">Google Drive Integrated Email</p><hr> 
 
    <a class="mgl20" href="javascript:void(0);">[email protected]</a> 
 
</div>

來源

2017-08-28 06:53:02

垂直文本旁邊的中心圖標

回答

相關問題