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>子元素正在float编辑。因此the computed value of display would be block。

<强> 9.7 Relationships between 'display', 'position', and 'float'

影响盒子生成和布局的三个属性 -   display，position和float - 互动如下：


[...]否则，如果＆＃39;浮动＆＃39;如果没有＆＃39; none＆＃39;，则该框浮动并显示＆＃39;根据下表设置。 [...]

+---------------------------------------------------------------+--------------------+
|                        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-block s是一个选项，以下可能是一个很好的起点：

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: