Je souhaite aligner l'image et le texte au centre. S'il vous plaît voir mon code htmlAligner l'image et le centre de texte à l'intérieur d'un autre div
.normal-div-border {
border: 1px solid #0e0d0d1a;
margin-top: 10px;
padding: 11px;
}
.j-div {
overflow: hidden;
width: 50%;
margin: 0 auto;
text-align: center;
}
.j-icon {
float: left;
}
.img-span {
float: left;
margin-top: 16px;
}
<div class="normal-div-border">
<div class="j-div">
<span class="img-span">
\t \t <img src="https://cdn2.iconfinder.com/data/icons/superheroes-set/128/ironman-2-32.png" class="j-icon">
\t \t </span>
<h2 class="new-h2"> Test Heading </h2>
</div>
<p>testing...................................</p>
</div>
Entendre ce que je dois est que je dois organiser titre de l'épreuve et l'image et dans le centre. Actuellement, il existe un écart entre cette image et new-h2. Comment pouvez-vous résoudre ce problème.
En fait, pour la fixation de ce que j'utilise
.j-div{
overflow:hidden;
width:50%;
margin:0 auto;
text-align:center;
}
Mais cela est que la fixation du texte, pas l'image.
Aidez-nous s'il vous plaît.
Merci ami. Cela fonctionne. Mais comment comprenez-vous cela? Pourriez-vous s'il vous plaît expliquer quelle est l'idée derrière cela. –
'text-align: center' fonctionne sur les éléments' inline', et 'float: left' faisait de' span' et 'h2' un élément' block'. Lisez [ce post] (http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block) et [doc w3c] (https: // www.w3.org/TR/CSS2/visuren.html#inline-boxes) pour comprendre 'inline-boxes'. –
Merci ami –