Question

我在导航栏的简单布局方面遇到了麻烦。栏的图标应该在其单元格中水平和垂直居中。

我无法弄清楚我的布局有什么问题。

HTML：

<div class="outer-frame">
    <div class="nav-frame">
        <div class="nav-cell">
            <div class="nav-icon">&#127968;</div>
        </div>
        <div class="nav-cell">
            <div class="nav-icon">&#128138;</div>
        </div>
        <div class="nav-cell">
            <div class="nav-icon">&#127915;</div>
        </div>
    </div>
</div>

CSS：

/* box around everything */
.outer-frame {
position: relative;
/* origin for absolute pos'ed children */
margin-left: auto;
margin-right: auto;
margin-bottom: 12pt;
width: 200px;
height: 190px;
border: 1px solid #f0f0f0;
background-color: #fafafa;
}
/* grey area to the left */
.nav-frame {
    position: absolute;
    left: 0px;
    top: 0px;
    box-sizing: border-box;
    width: 36px;
    height: 100%;
    background-color: grey;
}
/* the outer container of the icon */
.nav-cell {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 36px;
    height: 38px;
    background-color: yellow;
    margin-top: 4px;
}
/* the inner container of the icon */
 .nav-icon {
    display: block;
    background-color: white;
    border: 1px solid orange;
    width: 8px;
    height: 8px;
    margin:auto;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

Answer 1

这是垂直和水平居中的方法之一，您需要绝对定位，将边距设置为自动并将所有四边设置为零（或偏移，但您需要定义它）：

position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;

请在此处查看：http://jsfiddle.net/j2v5m7gr/7/

栏的图标应该在其单元格中水平和垂直居中。

在这里：http://jsfiddle.net/j2v5m7gr/10/从上面采用相同的方法。

Divs不会垂直居中，为什么不呢？

1 个答案: