alignment - 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。正如我所看到的，您的容器具有固定的宽度和高度。您可以通过设置元素的top和left属性来使用它span

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;
}

line-height => 180px (container) - 10px (font size) = 170px