html div中心文本之间的图像

I have the following (modified with valid code):

我有以下内容(使用有效代码修改):

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

My problem: I can't seem to be able to center the text between the images while being able to resize the browser window and get the span text to wrap but still stay in the vertically centered between the images down to a very narrow window where the text wraps from a single line to multiple lines. Also, I need to fill the parent div by right justifying the final image should the text be shore.

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

1 个解决方案

#1

The question is a bit tricky and doesn't have a straight forward solution. Basically you're asking to maintain the width of the span flexible/auto, based on the width of the window, while keeping the images at a fixed width.

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

Check out the jsfiddle here

看看这里的jsfiddle

HTML: (Also there were some html errors that I fixed.)

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

#1