html div 图片之间的中心文本

Question

我有以下（用有效代码修改）：

<div width:50%>
  <img height="30px" width="30px" src="some1.png"/>
  <img height="30px" width="30px"  src="some2.png"/>
  <span>A bunch of text that will wrap around to two or more lines</span>
  <img height="30px" width="30px"  src="some3.png">
</div>

我的问题：我似乎无法在调整浏览器大小的同时使图像之间的文本居中 window 并使跨度文本换行但仍保持在垂直居中图像缩小到非常窄的 window，其中文本从一行换行到多行。另外，我需要通过右对齐最终图像来填充父 div 如果文本是支持的。

Answer 1

这个问题有点棘手，没有直接的解决方案。基本上，您要求根据 window 的宽度保持跨度 flexible/auto 的宽度，同时将图像保持在固定宽度。

查看 jsfiddle here

HTML：（我还修复了一些 html 错误。）

<div class="wrapper">
  <img height="30" width="30" src="http://placehold.it/30x30" alt="image" />
  <img height="30" width="30" src="http://placehold.it/30x30" alt="image" />
  <div class="container">
    <span>A bunch of text that will wrap around to two or more lines</span>    
  </div>
  <img class="last" height="30" width="30" src="http://placehold.it/30x30" alt="image" />
</div>

CSS:

.wrapper {
   position: relative;
}

.container {
    border-collapse: separate;
    box-sizing: border-box;
    display: table;
    float: none;
    position: relative;
    width: auto;
}

span {
    border-collapse: separate;
    box-sizing: border-box;
    display: block;
    float: left;
    height: 30px;
    margin: 0 40px 0 5px;
    padding-top: 7px;
    position: relative;
}

img {
    display: block;
    float: left;
    margin: 0 5px;
    box-sizing: border-box;
}

img.last {
    display: block;
    float: none;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap;
    width: 30px;
}

html div 图片之间的中心文本

html div center text between images

html

css

tags