css - 我怎样才能使嵌套的 div 居中

Question

我正在尝试将嵌套的 div 垂直居中以创建一个简单的数学问题(带分数)，但我不确定该怎么做(不根据父 div 高度对其进行硬编码)

我目前的情况是这样的:

我试图让加号居中(div .plus)

html

<div class = "problem">
    <div class = "fraction">
        5
        <hr />
        6
    </div>
    <div class= plus>
        +
    </div>
    <div class = "fraction">
        5
        <hr />
        6
    </div>
</div>

CSS

.fraction{
    width: 15px;
    text-align: center;
}

.problem > *{
    float: left;
    margin: 10px;
}

fiddle

Answer 1

您可以使用 inline-block 而不是 float:

.problem > *{
  display:inline-block;
  margin: 10px;
  vertical-align:middle;
}

演示 http://jsfiddle.net/NT6d5/2/