垂直文字旁边的居中图标 [英] Center icon vertically next to text

查看：112
本文介绍了垂直文字旁边的居中图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



我已经尝试了很多东西，我在SO上找到了这些东西，但没有什么帮助。
我在CSS方面经验不足。



我想这样显示：

< a href =https://i.stack.imgur.com/uBFnM.png =nofollow noreferrer>

.inline-block {display：inline-block;}。lock_image {width：30px; height：30px;} hr {width：250px; margin：0px;底部：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.pngalt =icons8_Lock_50border =0class =lock_image>< / div>< div class =inline-block> < p class =title> Google云端硬盘集成电子邮件< / p> < HR> < a class =mgl20href =javascript：void（0）;> xyz@gmail.com< / a>< / div>

flexbox ，垂直居中。

data-console =truedata-babel =false>

。包装器{display：flex; align-items：center;}。inline-block {display：inline-block;}。lock_image {width：30px; height：30px;} hr {width：250px; margin：0px;底部：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.pngalt =icons8_Lock_50border =0class =lock_image> < / DIV> < div class =inline-block> < p class =title> Google云端硬盘集成电子邮件< / p> < HR> < a class =mgl20href =javascript：void（0）;> xyz@gmail.com< / a> < / div>< / div>

I have tried below code to get desired output, how to display that lock in middle of that.

I have tried so many thing, which I found on SO, but nothing helpful. I am not very experienced in CSS.

I want to display like this:

.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>

解决方案

I added a wrapper around the content you had and made it a flexbox with vertical center alignment.

.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>

这篇关于垂直文字旁边的居中图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆