垂直文本旁边的中心图标

我已经尝试了下面的代码来获得所需的输出，如何在中间显示该锁。垂直文本旁边的中心图标

我已经尝试了很多东西，我发现这些东西，但没有什么帮助。我不是很有经验的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

垂直文本旁边的中心图标

回答

相关问题