Question

我使用下面的代码显示图像和一些文本，如1 2 3 4。我是html和css的新手，虽然图像部分工作正常，但我希望对齐文本以填充图像的顶部和底部，如下所示：

同样的，如果我添加更多文本然后自动对齐......我应该在哪里找到它？

＆＃13;

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

＆＃13;

Answer 1

使用一些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>

Answer 2

注意：在IE9，IE8和IE7中不支持Flex，所以我不使用它。

试试这个：

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

Answer 3

为了简单起见，您可以将图像设置为背景并在图像宽度上进行填充：

＆＃13;

#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;
}

＆＃13;

<div id="imgHolder">
    1
    <br/>
    2
    <br/>
    3
    <br/>
    4
</div>

＆＃13;

Answer 4

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<img src = "yourimagesource">1</br>2</br>3</br>4

</body>
</html>

完成后，您只需更改您正在使用的编辑器中图片的text-aligment属性。

您还可以创建一个包含值的表格，并在图片的左侧对齐。

HTML图像和文本对齐顶部和底部

4 个答案: