how can I vertically center a span in a div?
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;
tex开发者_StackOverflowt-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;
}
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.
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.
精彩评论