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 Example

...问候

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 =＆gt; 180px（容器） - 10px（字体大小）= 170px

Span在Div CSS中没有正确对齐

3 个答案: