如何將div和文本設置為其父級的垂直中間

Question

我在父div中包含兩個div。 第一格位於左側，第二格位於右側。 因此，我希望在父級中間設置正確的div，而不會使用邊距。

的HTML

<div class="clearfix" style="background-color: #CCCCCC;">
   <div style="padding: 10px; background-color: #0099FF;" class="inline-block">
        <div class="inline-block"><div>Post</div><div>139</div></div>
        <div class="inline-block"><div>Following</div><div>139</div></div>
        <div class="inline-block"><div>Followers</div><div>139</div></div>
     </div>
     <div class="rfloat" style="background-color: #00FF66; display: table-cell; vertical-align: middle;">
          <a href="#">Follow</a>
          <a href="#">Message</a>
          <a href="#">Report</a>
      </div>
</div>

的CSS

.inline-block {
    display: inline-block;
}
.rfloat {
    float: right;
}
.lfloat {
    float: left;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}
.clearfix:after {
  clear: both;
}

這是jsfiddle http://jsfiddle.net/fmr3Y/

Answer 1

這是怎么做的

演示

的HTML

<div class="rfloat" style="background-color: #00FF66; display: table; height: 60px">

的CSS

 a {
    display: table-cell;
    vertical-align: middle;
    }

Answer 2

使用display： table-演示

<div class="clearfix" style="background-color: #CCCCCC; display:table;width:100%;">
        <div style="padding: 10px; background-color: #0099FF;" class="inline-block">
            <div class="inline-block">
                <div>Post</div>
                <div>139</div>
            </div>
            <div class="inline-block">
                <div>Following</div>
                <div>139</div>
            </div>
            <div class="inline-block">
                <div>Followers</div>
                <div>139</div>
            </div>
        </div>
        <div class="ss" style="background-color: #00FF66; display: table-cell; vertical-align: middle;"> <a href="#">Report</a>
     <a href="#">Message</a>
     <a href="#">Follow</a>

        </div>
    </div>

Answer 3

您可以使用display和text-align：justify來模仿flex justify-content： DEMO

.inline-block {
    display: inline-block;
    font-size:16px;/* do not forget to reset font-size to childs*/
    font-size:1rem;
    text-align:center;/* left, right, .. */
}

.justify:after {
  display: inline-table;
  content: " ";
    width:100%;
    height:0;
    vertical-align:top;/* no extra gap please */
}
.justify {
  text-align:justify;/* will span element from one side to the other */
    font-size:0;/* reduce line-height and avoid gap from pseudo element */
}

用類名更新的HTML：

<div class="justify" style="background-color: #CCCCCC;">
   <div style="padding: 10px; background-color: #0099FF;vertical-align: middle;" class="inline-block">
        <div class="inline-block"><div>Post</div><div>139</div></div>
        <div class="inline-block"><div>Following</div><div>139</div></div>
        <div class="inline-block"><div>Followers</div><div>139</div></div>
     </div>
     <div class="inline-block" style="background-color: #00FF66; vertical-align: middle;">
          <a href="#">Follow</a>
          <a href="#">Message</a>
          <a href="#">Report</a>
      </div>
</div>

Answer 4

我已經更改了您的結構，使Right Div成為中心

<table class="clearfix" style="background-color: #CCCCCC; width: 100%;text-align: center; ">
        <colgroup>
            <col style="width: 19%"/>
            <col style="width: 75%"/>
        </colgroup>
        <tr>
            <td>
                <div style="padding: 10px; background-color: #0099FF;" class="inline-block">
                    <div class="inline-block">
                        <div>Post</div>
                        <div>139</div>
                    </div>
                    <div class="inline-block">
                        <div>Following</div>
                        <div>139</div>
                    </div>
                    <div class="inline-block">
                        <div>Followers</div>
                        <div>139</div>
                    </div>
                </div>
            </td>
            <td>
                <div  style="background-color: #00FF66; vertical-align: middle;">
                    <a href="#">Follow</a>
                    <a href="#">Message</a>
                    <a href="#">Report</a>
                </div>
            </td>
        </tr>
    </table>

這也是工作演示。 工作小提琴