Span在Div CSS中未正確對齊

Question

<span>只能在<div>內水平對齊，而不能垂直對齊

CSS：

.upload-cont{
    cursor:pointer;
    margin-left:130px;
    display:inline-block;
    border:2px dashed #a8a8a8;
    max-width:220px;
    max-height:180px;
    min-width:220px;
    min-height:180px;
}
.add-text{
    display:block;
    font-size:10px;
    font-weight:bold;
    color:#999;
    word-wrap:break-word;
    text-align:center;
    width:100px;
    margin:auto;
    vertical-align:middle;
}

HTML：

<div class="upload-cont">
  <span class="add-text">Something</span>
</div>

我應該怎么做才能使<span>在<div>的中間垂直對齊？

檢查此jsfiddle： http : //jsfiddle.net/xdYUs/1/

Answer 1

試試這個： http : //jsfiddle.net/xdYUs/2/

使用position:relative; 到容器和position:absolute; 到span元素。 如我所見，您的容器具有固定的寬度和高度。 您可以通過設置span元素的top和left屬性來使用它

Answer 2

嘗試這個...

.add-text{
    display:block;
    font-size:10px;
    font-weight:bold;
    color:#999;
    text-align:center;
    width:100px;
    margin: 40% auto;
}

jsFiddle示例

問候...

Answer 3

.add-text
{
    display:block;
    font-size:10px;
    font-weight:bold;
    color:#999;
    word-wrap:break-word;
    text-align:center;
    width:100px;
    margin:auto;
    vertical-align:middle;
    line-height:170px;
}

行高=> 180像素（容器）-10像素（字體大小）= 170像素