Question

这是我得到的。到目前为止，无论高度如何，我都无法将图标垂直居中在右侧DIV中。当它达到最大长度时，我也无法让左侧DIV中的文字中断。

两个框应该保持相同的高度，如果左边有几行文字，右边也应该调整

预期： enter image description here

HTML：

  <div class="container">

    <div class="right">
        <div class="someIcon"></div>
    </div> 
    <div class="left">
aaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbcccdcccccccccccccccccccccccccccccdccccccccddccccc
    </div>

</div>

CSS：

    .left {
    overflow: hidden;

    border: 1px solid #FF0000;
    /* word-wrap: break-word;
    word-break: break-all;
    text-wrap: normal; 
    white-space: normal;*/
    word-break: break-all;
}

.container {
    display: block;
    position: relative;
    overflow: hidden;
}

.someIcon {
    background: url(http://www.adiumxtras.com/images/thumbs/adiumtwit_twitters_icon_for_adium_1_31971_7892_thumb.png);
    background-size: 20px;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    position: absolute;
    top: 50%:
}

.right {
    float: right;
    width: 50px;
    min-height: 50px;
    border: 1px solid #000000;
    display:table-cell; 
    vertical-align:middle;
}

Answer 1

我使用背景属性位置属性简化了布局，使其垂直向右居中。你不应该做任何漂浮。我尽量保持布局尽可能简单。

CSS

.container {
    border:1px solid black;
    background: url(http://www.adiumxtras.com/images/thumbs/adiumtwit_twitters_icon_for_adium_1_31971_7892_thumb.png) center right 15px no-repeat;
    position: relative;
    margin: 5px;
    padding: 15px 75px 15px 15px;
}

自CSS: How do I wrap text with no whitespace inside a <td>?

提取的包装词类

.wrapword{
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}

HTML

<div class="container wrapword">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

<div class="container wrapword">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet facilisis tellus. Aliquam eu mi in augue faucibus egestas sed convallis lorem. Nulla rutrum purus ac dolor dictum viverra.
</div>

<div class="container wrapword">
    a short sentence
</div>

更新：删除了不必要的div，支持一个非常长的词（尽管我认为没有必要） http://jsfiddle.net/SpSjL/1708/

您可以调整背景和容器上的填充以适合您的图像。

Answer 2

首先，图标，非常简单：

删除.someIcon元素，并将图标作为.right div的居中背景：

.right {


   background: url(http://www.adiumxtras.com/images/thumbs/adiumtwit_twitters_icon_for_adium_1_31971_7892_thumb.png) center center no-repeat;
    background-size: 20px;
    float: right;
    width: 50px;
    min-height: 50px;
    border: 1px solid #000000;
    display:table-cell; 
    vertical-align:middle;
    }

The layout problem needs more time, I come with that soon.

编辑：

这里你去:)，工作演示：http://jsfiddle.net/SpSjL/1709/

你必须使用display：table cell;在两个div上：

    <div class="container">


        <div class="left">
    aaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbcccdcccccccccccccccccccccccccccccdccccccccddccccc
        </div>
         <div class="right">
            <div class="someIcon"></div>
        </div> 
        <div class="clear"></div>
    </div>

CSS：

.left {
display: table-cell;
    margin-right: 52px;
    border: 1px solid #FF0000;
    /* word-wrap: break-word;
    word-break: break-all;
    text-wrap: normal; 
    white-space: normal;*/
    word-break: break-all;

}

.container {
    display: block;
    position: relative;
    height: 100px;
}



.right {
     background: url(http://www.adiumxtras.com/images/thumbs/adiumtwit_twitters_icon_for_adium_1_31971_7892_thumb.png) center center no-repeat;
    background-size: 20px;
    display: table-cell;
    width: 50px;
    min-height: 50px;
    border: 1px solid #000000;

}

我清理了所有代码。

Answer 3

检查此FIDDLE

只需从右侧div中删除float，然后将其放在左侧div之后。

使用最少的CSS更新了FIDDLE

Answer 4

嗯，如果你知道你的图标总是固定大小，并且你愿意采用绝对定位，那么是什么阻止你使用负边距？

.someIcon {
    background: url(http://www.adiumxtras.com/images/thumbs/adiumtwit_twitters_icon_for_adium_1_31971_7892_thumb.png);
    background-size: 20px;
    width: 20px;
    height: 20px;
    margin: -10px;
    left: 50%;
    top: 50%;
    position: absolute;
}

这是updated fiddle。

两个DIVS，一个流体，一个固定，固定的div，无论高度如何都有垂直居中的元素

4 个答案: