Question

我正在通过剥离http://www.darrencousins.com/rr-blogs/hexagons/CSS%20-%20Hexagons%20v2/

创建一个六边形菜单

我的问题是，似乎无法将每个六边形中的文本垂直居中。

到目前为止我的进展可以在这里找到：http://jsfiddle.net/z54xj/

这是CSS

/* Hexagon - Create*/
.hex-row {
    clear:left;
}

.hex-wrapper {
    float: left;
    position: relative;
    width: 60px;
    height: 100px;
    margin-right: 34px;
    margin-bottom: -48px;
}

.hex-wrapper.even {
    margin-top: 53px;
}

.hex {
    vertical-align:middle;
    position:absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 100px;
    background: #114781;
}

.hex:before {
    vertical-align:middle;
    content:" ";
    position: absolute;
    left: -30px;
    border-right: 30px solid #114781;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

.hex:after {
    vertical-align:middle;
    content:" ";
    position: absolute;
    right: -30px;
    border-left: 30px solid #114781;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

/* Hexagon Hover */
.hex:hover {
    background: #2C86C6;
}

.hex:hover:before {
    border-right: 30px solid #2C86C6;
}

.hex:hover:after {
    border-left: 30px solid #2C86C6;
}

span {
    display:inline-block;
    vertical-align:middle;
}

和HTML

<div class="hex-row">
    <div class="hex-wrapper" style="visibility:hidden;"><div class="hex"></div></div>
    <div class="hex-wrapper even"><div class="hex"><span>hello</span></div></div>
    <div class="hex-wrapper" style="visibility:hidden;"><div class="hex"></div></div>
</div>

<div class="hex-row">
    <div class="hex-wrapper"><div class="hex"></div></div>
    <div class="hex-wrapper even"><div class="hex">hello</div></div>
    <div class="hex-wrapper"><div class="hex"></div></div>
</div>
<div class="hex-row">
    <div class="hex-wrapper"><div class="hex"></div></div>
    <div class="hex-wrapper even"><div class="hex"></div></div>
    <div class="hex-wrapper"><div class="hex"></div></div>
</div>

Answer 1

您只需将这些添加到`.hex-wrapper

即可

line-height:100px; /* same as div height */
text-align:center; /* for horizontal centering */

JSfiddle Demo

Answer 2

您可以使用line-height和text-indent同时从span display:inline-block

中删除

<强> CSS

/* Hexagon - Create*/
.hex-row {
    clear:left;
}

.hex-wrapper {
    float: left;
    position: relative;
    width: 60px;
    height: 100px;
    margin-right: 34px;
    margin-bottom: -48px;
}

.hex-wrapper.even {
    margin-top: 53px;
}

.hex {
    vertical-align:middle;
    position:absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 100px;
    background: #114781;
    line-height: 92px;
    text-indent: 15px;    
}

.hex:before {
    vertical-align:middle;
    content:" ";
    position: absolute;
    left: -30px;
    border-right: 30px solid #114781;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

.hex:after {
    vertical-align:middle;
    content:" ";
    position: absolute;
    right: -30px;
    border-left: 30px solid #114781;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

/* Hexagon Hover */
.hex:hover {
    background: #2C86C6;
}

.hex:hover:before {
    border-right: 30px solid #2C86C6;
}

.hex:hover:after {
    border-left: 30px solid #2C86C6;
}

span {
    vertical-align:middle;
}

fiddle

为什么我的文本不会有中心垂直对齐

2 个答案: