センターのアイコンは、テキストの横にあります

Question

私は希望の出力を得るために以下のコードを試しました。その途中でそのロックを表示する方法。

私はそんなに多くのことを試しましたが、私はそれを見つけましたが、役に立たないものはありません。 私は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

私はあなたが持っていたコンテンツのラッパーを追加し、垂直方向の中央揃えでそれ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 2

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);">xyz@gmail.com</a> 
 
</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>