文字旁垂直居中的圖標

Question

我試過下面的代碼來獲取所需的輸出，以及如何在中間顯示該鎖。

我已經嘗試了很多東西，這些都是我在SO上發現的，但是沒有任何幫助。 我對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);">xyz@gmail.com</a> </div> 

Answer 1

請vertical-align:middle inline-block類vertical-align:middle添加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);">xyz@gmail.com</a> </div> 

Answer 2

我圍繞您所擁有的內容添加了一個包裝器，並使其成為具有垂直中心對齊方式的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);">xyz@gmail.com</a> </div> </div> 

Answer 3

嘗試以下代碼：這是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);">xyz@gmail.com</a> </div>