Comment centraliser une icône et un paragraphe dans une ligne

Question

J'essaie de centraliser une icône et un paragraphe dans l'en-tête de l'application. Actuellement, il ressemble à ceci.

Je veux montrer une icône et un paragraphe avec la même hauteur. J'ai ajouté padding-bottom pour que cela se produise même si cela n'a pas fonctionné.

sample.js (la demande est faite avec React.js)

<div className="title"><img src={title} className="title" alt="title" />SAMPLE TITLE</div> 

index.css

.title { 
text-decoration: none; 
background-color: #454545; 
color: white; 
padding-bottom: 10px; 
} 

Edit: Cette question a été marquée comme en double avec Vertically align text next to an image?. Je ne connaissais pas vertical align et je pense qu'il y a des gens comme moi, alors j'aimerais garder cette question.

Answer 1

Set display et vertical-align propriété sur img

.title { 
 
    text-decoration: none; 
 
    background-color: #454545; 
 
    color: white; 
 
} 
 

 
.title img { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="title"><img src='https://placehold.it/40x40' alt="title" />SAMPLE TITLE</div>

Answer 2

Essayez d'utiliser Flex css

.title { 
display: flex; 
flex-direction: row; 
justify-content: center; 
align-content: center; 
align-items: center; 
} 

.title img { 
margin-right: 8px; 
} 

Answer 3

Essayez de donner un line-height au texte avec le même height de l'image.

Exemple

<div className="title"> 
    <img src={title} style={{ height: 25 }} className="title" alt="title" /> 
    <span style={{lineHeight: 25}}>SAMPLE TITLE</span> 
</div> 

Answer 4

Étant donné que votre image est affichée inline c'est ce que vous voulez aligner, pas t le texte. Utilisez simplement la propriété vertical-align: middle. Jetez un oeil à la description plus à MDN:

La propriété verticale align CSS spécifie l'alignement vertical d'une boîte à cellules de table en ligne ou.

const MyApp =() => <div className="title"> 
 
    <img src="http://via.placeholder.com/50x50" className="title" alt="title" /> SAMPLE TITLE 
 
</div>; 
 
    
 
ReactDOM.render(<MyApp />, document.getElementById("app"));

.title { 
 
    text-decoration: none; 
 
    background-color: #454545; 
 
    color: white; 
 
    vertical-align: middle; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

Answer 5

Vous pouvez utiliser vertical-align: middle sur le img.

.title { 
 
    text-decoration: none; 
 
    background-color: #454545; 
 
    color: white; 
 
    padding: 5px; 
 
} 
 

 
.title img { 
 
    border-radius: 100%; 
 
    margin-right: 10px; 
 
    vertical-align: middle; 
 
}

<div class="title"><img src="http://via.placeholder.com/50x50" alt="title" />SAMPLE TITLE</div>