CODEWITHSUNDEEP
alignmenthtml
harikrishnan.n0077
harikrishnan.n0077

Reputation: 2067

Span is not aligning properly inside Div CSS

<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/

Upvotes: 1

Views: 6595

Answers (3)

Mihai Matei
Mihai Matei

Reputation: 24276

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

Upvotes: 2

arnisritins
arnisritins

Reputation: 1340

.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

Upvotes: 0

MG_Bautista
MG_Bautista

Reputation: 2653

Try this...

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

jsFiddle Example

Greetings...

Upvotes: 1

Related Questions