我使用下面的代码在其右侧显示图像和一些文本，如 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 魔法
这是完全可扩展的，无论图像大小如何都可以使用。
#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>关于HTML 图像和文本上下对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43940167/