Question

所以，我有一个页面（高度100％）分成两行（上半部分30％，下半部分70％）。

我有一个h2标签封闭在上半部分的一列中，我希望垂直居中，而我的下半部分还有另外3列需要垂直居中。

    <div class="container gb">
    <div class="row" style="height:30%; background: #f6f6f6;">
        <div class="twelve columns">
             <h2 style="text-align: center;">30%</h2>
        </div>
    </div>
    <div class="row" style="height:70%; background: #d4fff0">
        <div class="one-third column">
            <div style="height: 100px; width: 100px; background-color:red;"></div>
        </div>
        <div class="one-third column">
            <div style="height: 100px; width: 100px; background-color:blue;"></div>
        </div>
        <div class="one-third column">
            <div style="height: 100px; width: 100px; background-color:green;"></div>
        </div>
    </div>
</div>

我对列的css如下：

width: 100%;
float: left;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;

完整的CSS：

.container.gb {
    width: 100%;
    max-width: 100%;
    height: 100%;
}
.container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.column, .columns {
    width: 100%;
    float: left;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.one-third.column {
    width: 30.6666666667%;
}
html, body {
    height: 100%;
}

但是对于我的生活，我无法理解为什么它不会起作用。我的目标是正确的div，但由于某种原因它不会成功。非常感谢任何帮助。

Answer 1

检查此版本：http://jsfiddle.net/leojavier/ko8wke5z/

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View v = inflater.inflate(R.layout.article_view, container, false);
    TextView textView = (TextView) v.findViewById(R.id.testelement);
    return v;
}

完整的CSS

<div id="roster">
  <ol contenteditable="true">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>
 </div>

你可以在这里试试：http://jsfiddle.net/leojavier/ko8wke5z/

中心在div内垂直划分

1 个答案: