我试过下面的代码来获取所需的输出,以及如何在中间显示该锁。

我已经尝试了很多东西,这些都是我在SO上发现的,但是没有帮助。
我对CSS不太有经验。

我想这样显示:

html - 文字旁垂直居中的图标-LMLPHP



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

最佳答案

我围绕您所拥有的内容添加了一个包装,并将其设置为具有垂直中心对齐的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>

关于html - 文字旁垂直居中的图标,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45913028/

10-13 08:07