Question

我有两个div，它包含在父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

这是你怎么做的

DEMO

HTML

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

CSS

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

Answer 2

使用display：table - demo

<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

我改变了你的结构，使得右边的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>

以下是工作演示。Working Fiddle

如何将div和text设置为父级的垂直中间

4 个答案: