如何在div中垂直居中放置跨度？

Question

I really would like this and have been trying for hours, I have it centered horizontally in the div but just need to get it vertically centered now..

This is my css code for the span thats horizontally centred in a div.

  .titl {

    font-family:serif;

    text-align:center;

    font-size:35px;
    font-weight: bolder;

    color:#FFFFFF;

    padding-top:1cm;
      text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
    -moz-text-shadow: 0 0 2px #000;
    -webkit-text-shadow: 0 0 2px #000;

  }

This is the html of div code:

<div class="wrapper">

<div id="Production" class="orange" style="cursor:wait">

    <div id="incidentsList">

        <span class="titl">Production</span>


    </div>
</div>





<div id="Infrastructure" class="red" style="cursor:wait">

    <div id="requestsList">
<span class="titl">Infrastructure</span>

    </div>
</div>





<div id="QA" class="green" style="cursor:wait">

    <div id="approvalsList">
<span class="titl">QA</span>

    </div>


</div>

</div>

The css code for the orange and red etc is below:

.orange {
    background-image: url('../images/nFinal.jpg');
    background-position: bottom;
    background-repeat: no-repeat;
    height: 120px;
    width: 224px;
    position: relative;
    float: left;
    margin-top: 2px;
    TEXT-ALIGN: center;
}

EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT* * ** * ** * ** * ** * ** * @Dan I tried what you said but it didnt work. HTML:

  <div id="Productiond">

            <span class="titl">text</span>


    </div>

CSS:

#Productiond {height: 50px}




 .titl {

    font-family:serif;

    text-align:center;

    font-size:35px;
    font-weight: bolder;

    color:#FFFFFF;

    padding-top:1cm;
      text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
    -moz-text-shadow: 0 0 2px #000;
    -webkit-text-shadow: 0 0 2px #000;
    height: 50px; 
    line-height: 50px;
  }

Answer 1

You could try setting the height of the .titl span to match the height of the enclosing div tag. then setting the line-height of the .titl span to match that as well. this would work depending on the context you are using it in.

Try this for an example:

HTML:

<div id='Request'>
<span class='titl'>Test Message</span>
</div>

CSS:

#Request {height: 50px}
.titl {height: 50px; line-height: 50px}

This would then display the title "Test Message" centered vertically inside the containing Div.

Answer 2

First, I would recommend removing the padding , height and line-height declarations from .titl . Then, I would specify vertical-align: middle on .titl . vertical-align is meant for inline elements, and span s are inline elements. Thus, you can use vertical-align .

That said, I was unable to duplicate your issue when attempting it on JSFiddle and JSBin. If this does not solve your issue, I would recommend posting a link to one or the other.