div内のimgを垂直に整列させますか？

Question

div内のimgを垂直方向に揃えていないものは誰か知っていますか？

私はいくつかのSASS（作業CSSの例も感謝許容:-)）

私はtext-alignは十分だと思ったがありますか？しかし、それは動作していません。マージンと高さは自動的に<img>に設定されているので、Gが機能していることがわかります。

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

と一部のHTML

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

任意のアイデア？ありがとう

Answer 1

は、ここを参照してくださいjsfiddle

text-alignはvertical-align

とは何の関係もありませんvertical-align項目、そのうちの一つがdisplay:flex

あると、いくつかの方法があります

コード：

.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

display: table-cell cssプロパティを使用すると、親内の要素を垂直に整列できます。

.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>