HTML图像和文本上下对齐
[英]HTML image and text align top and bottom
问题描述
我使用下面的代码来显示图像和一些像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>
4 个解决方案
解决方案1
5 已采纳 2017-05-12 14:32:00
带有一些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>
解决方案2
0 2017-05-12 14:59:22
注意：Flex不支持IE9，IE8和IE7，因此我不使用它。
尝试这个 ：
#wrapper { position: relative; overflow: hidden; } #wrapper:after { display:block; clear:both; content:''; } #Number { height: 100%; position: absolute; margin-left: 130px; box-sizing:border-box; } .im { float: left; } span { display: block; height: 28%; }
<div id="wrapper"> <img class="im" src = "http://icons.iconarchive.com/icons/uiconstock/christmas-clipart/128/flower-icon.png"> <div id="Number"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </div>
解决方案3
0 2017-05-12 15:10:44
为了简单起见，您可以将图像设置为背景，并在图像的宽度中进行填充：
#imgHolder{ background-image: url('http://icons.iconarchive.com/icons/uiconstock/christmas-clipart/128/flower-icon.png'); background-repeat: no-repeat; height: 130px; padding-left: 130px; line-height: 32px; }
<div id="imgHolder"> 1 <br/> 2 <br/> 3 <br/> 4 </div>
解决方案4
-1 2017-05-12 14:31:51
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<img src = "yourimagesource">1</br>2</br>3</br>4
</body>
</html>
完成此操作后，您只需在使用的编辑器中更改“图片”的text-aligment属性即可。
您还可以创建一个表格，其中包含您的值并在图片的左侧对齐。
垂直对齐图像的底部和某些文本的顶部
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.