HTML图像和文本对齐顶部和底部
我使用下面的代码来显示图像和一些1 2 3 4正确的文本.我是html和css的新手,虽然图像部分工作正常,但我希望文本对齐以填充图像的顶部和底部,如下所示:
同样的方法,如果我添加更多文本然后自动对齐...我应该在哪里寻找这个？
<!DOCTYPE html>
<html>
<head>
<style></style>
</head>
<body>
<img src = "http://icons.iconarchive.com/icons/uiconstock/christmas-clipart/128/flower-icon.png" />1 2 3 4
</body>
</html>使用一些CSS Flex Magic
这是完全可扩展的,无论图像大小如何都可以使用.
#imgWrap,
#imgWrap ul{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#imgWrap ul{
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
list-style:none;
margin:0;
padding:0;
}<div id="imgWrap">
<img src = "http://icons.iconarchive.com/icons/uiconstock/christmas-clipart/128/flower-icon.png">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>