Question

<span> is only aligning horizontally but not vertically inside <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>

What should i do to align the <span> vertically that is at the middle of <div>?

Check this jsfiddle: http://jsfiddle.net/xdYUs/1/

Answer 1

Try this: http://jsfiddle.net/xdYUs/2/

Use position:relative; to the container and position:absolute; to the span element. As I’ve seen, your container has fixed width and height. You can use that by setting the top and left properties of the span element