CODEWITHSUNDEEP
htmlcss
chirag satapara
chirag satapara

Reputation: 1937

Center icon vertically next to text

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:

enter image description here

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

Upvotes: 0

Views: 52

Answers (3)

Rahul Kashyap
Rahul Kashyap

Reputation: 977

Try this code: Here is the 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>

Upvotes: 0

Gerard
Gerard

Reputation: 15786

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);">[email protected]</a>
  </div>
</div>

Upvotes: 1

ankita patel
ankita patel

Reputation: 4251

Please add vertical-align:middle in inline-block class.

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

Upvotes: 1

Related Questions