将浮动 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
但它仅适用于已知大小的divs。

还有这个：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'

影响盒子生成和布局的三个属性—— display、position 和 float — 交互如下：

1. [...] 否则，如果 'float' 的值为 'none' 以外的值，则框是浮动的，并且根据下表设置 'display'。 [...]

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