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>

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

Answer 1

这个问题有点棘手，并没有直接的解决方案。基本上你要求根据窗口的宽度保持跨度灵活/自动的宽度，同时保持图像的固定宽度。

查看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中心文本之间的图像

1 个答案: