Verstecke einen img innerhalb eines div?

Question

Weiß jemand, was ich vermisse, um ein IMG in einem Div vertikal auszurichten?

Ich habe einige Sass (Arbeits auch CSS-Beispiele dankbar akzeptabel :-))

Ich dachte text-align ausreichend war? Aber es funktioniert nicht. Der Rand und die Höhe werden automatisch auf dem gesetzt, damit G weiß, dass das funktioniert.

.testdiv { 
    font-size: rem(12); 
    height: 80px; 
    img { 
    margin-left: 12px; 
    height: 16px; 
    width: 16px; 
    text-align: center; 
    } 
} 

und einige html

<div class="testdiv"> 
    <img src="./test.png"> 
</div> 

Irgendwelche Ideen? Danke

Answer 1

siehe hier jsfiddle

text-align hat nichts mit vertical-align

zu tun gibt es eine Reihe von Möglichkeiten, um vertical-align Artikel, einer von ihnen ist display:flex

Code:

.testdiv { 
    font-size: rem(12); 
    height: 80px; 
    display:flex; 
    align-items: center; 
    justify-content: center; 
    width:100px; 
    height:100px; 
    border:5px solid red; 
     img { 
     margin-left: 0px; 
     height: 16px; 
     width: 16px; 
     text-align: center; 
    } 
} 

Answer 2

Sie können display: table-cell CSS-Eigenschaft verwenden, um ein Element vertikal in einem übergeordneten Element auszurichten.

.testdiv { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    font-size: rem(12); 
 
    text-align: center; 
 
    background: black; 
 
    height: 80px; 
 
    width: 100px; 
 
} 
 

 
img { 
 
    vertical-align: top; 
 
    height: 16px; 
 
    width: 16px; 
 
}

<div class="testdiv"> 
 
    <img src="images/image.jpg" alt="Image Description"> 
 
</div>