html - Harmonisation verticale du texte à côté d'une image

Mots clés : htmlcssalignmentvertical-alignmenthtml

meilleur 5 Réponses html - Harmonisation verticale du texte à côté d'une image

vote vote

91

<!-- moved "vertical-align:middle" style from span to img --> <div>   <img style="vertical-align:middle" src="https://via.placeholder.com/60x60">   <span style="">Works.</span> </div>
.box {    display: flex;    align-items:center; }
<div class="box">     <img src="https://via.placeholder.com/60x60">     <span style="">Works.</span> </div>
vote vote

82

<div>   <img style="width:30px; height:30px;">   <span style="line-height:30px;">Doesn't work.</span> </div> 
<div style="position:relative;width:30px;height:60px;">   <div style="position:absolute;bottom:0">This is positioned on the bottom</div> </div> 
<div style="display:table;width:30px;height:60px;">   <div style="display:table-cell;height:30px;">This is positioned in the middle</div> </div> 
<style type="text/css">   #container {     width: 30px;     height: 60px;     position: relative;   }   #wrapper > #container {     display: table;     position: static;   }   #container div {     position: absolute;     top: 50%;   }   #container div div {     position: relative;     top: -50%;   }   #container > div {     display: table-cell;     vertical-align: middle;     position: static;   } </style>  <div id="wrapper">   <div id="container">     <div><div><p>Works in everything!</p></div></div>   </div> </div> 
position: relative; top: 50%; transform: translateY(-50%); 
vote vote

78

div { display:flex; } 
div { align-items:center; } 
div * { margin-top:auto; margin-bottom:auto; } 
vote vote

63

<div>    <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">    <span style="vertical-align:middle">Perfectly centered</span>  </div>
vote vote

56

div {     display: table; } span {     vertical-align: middle;     display: table-cell; } 
div {    height: 200px; /* height of image */ }  div:before {   content: '';   display: inline-block;   height: 100%;   vertical-align: middle;   margin-right: -0.25em; /* Adjusts for spacing */ }  img {     position: absolute; }  span {   display: inline-block;   vertical-align: middle;   margin-left: 200px;  /* width of image */ } 
div {        display: flex;      align-items: center;     } img {     min-width: 200px; /* width of image */ } 

Questions similaires