将浮动 div 垂直对齐到未知大小 div

Question

我有一个大小未知的 div 和另一个 div（带有 CSS 旋转文本）在彼此下方浮动。我现在正尝试将文本移动到垂直中间，但我无法正常工作。

<div id="wrapper">
    <div id="unknownSizeDiv"> ... </div>
    <div id="rotatedTextDiv"> ... </div>
</div>
<div id="wrapper">
    <div id="unknownSizeDiv"> ... </div>
    <div id="rotatedTextDiv"> ... </div>
</div>

或大： http://jsfiddle.net/229mvsdb/

之后应该是这样的：

我尝试使用此处给出的解决方案：Vertically & horizontally align text after CSS rotation
但它仅适用于 div 个已知大小。

还有这个：How to vertically middle-align floating elements of unknown heights? 我认为
应该解决我的问题，但正如您在 jsfiddle 中看到的那样，它不是。

Answer 1

It is achievalbe 使用纯 CSS。以下是您要对 CSS.

执行的操作

     .paragraphWrapper{ position: relative; } /*so that its absolutely positioned children calculate their offset wrt this element*/
     .paragraphWrapper:after{ content: ''; display: table; clear: both; }
     .paragraphWrapper > div{
        display: inline-block;
        vertical-align: middle;
     }
     .paragraph{
        border: 1px dashed #ccc;
        float: left;
        clear: both;
        margin: 5px;
        margin-bottom: 50px;
        width: 415px;
     }
     .paragraphMetaInfo{
        position: absolute;
        top: 50%;
        left: 405px;
        /*move them 50% of text's width towards top to get properly centered*/
        -moz-transform: rotate(90deg) translate(-50%, 0);
        -o-transform: rotate(90deg) translate(-50%, 0);
        -webkit-transform: rotate(90deg) translate(-50%, 0);
        transform: rotate(90deg) translate(-50%, 0) /*as pointed out by Shikkediel*/
     }

Answer 2

您的以下规则没有任何效果：

.paragraphWrapper > div {
    display:inline-block;
    vertical-align:middle;
}

因为 <div> 子元素正在 floated。因此the computed value of display would be block.

9.7 Relationships between 'display', 'position', and 'float'

The three properties that affect box generation and layout — display, position, and float — interact as follows:

[...] Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below. [...]

+---------------------------------------------------------------+--------------------+
|                        Specified value                        |   Computed value   |
+---------------------------------------------------------------+--------------------+
|   inline, table-row-group, table-column, table-column-group,  |                    |
|   table-header-group, table-footer-group, table-row,          |       block        |
|   table-cell, table-caption, inline-block                     |                    |
+---------------------------------------------------------------+--------------------+

实际上，没有真正的方法可以垂直对齐浮动元素。但是如果使用 inline-blocks 是一个选项，那么以下可能是一个很好的起点：

.paragraphWrapper {
    margin-bottom: 50px;
}

.paragraph {
    border: 1px dashed #ccc;
    margin: 5px;
    width: 415px;
}

.paragraphWrapper > div {
    display: inline-block;
    vertical-align: middle;
}

.paragraphMetaInfo {
    -webkit-transform: rotate(90deg) translateY(50%);
    -moz-transform: rotate(90deg) translateY(50%);
    -ms-transform: rotate(90deg) translateY(50%);
    -o-transform: rotate(90deg) translateY(50%);
    transform: rotate(90deg) translateY(50%);
    writing-mode: tb-rl;
}

<div class="paragraphWrapper">
    <div class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div>
    <div class="paragraphMetaInfo" id="paragraphMetaInfo_0">1. Paragraph
        <br/>64 Words</div>
</div>
<div class="paragraphWrapper">
    <div class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    <div class="paragraphMetaInfo" id="paragraphMetaInfo_1">2. Paragraph
        <br/>184 Words</div></div>
    <div class="paragraphWrapper">
        <div class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div class="paragraphMetaInfo" id="paragrapheMetaInfo_2">3. Paragraph
            <br/>214 Words</div></div>

将浮动 div 垂直对齐到未知大小 div

Vertically align floating div to an unknown sized div

css

vertical-alignment