Vertical Align in Span Doesn't Work?

Asked Jun 12 '14 at 05:16

Active Jun 12 '14 at 05:19

Viewed 239 times

I don't think is exact scenario is answered elsewhere. Please don't close it... I want the span to be centered vertically using vertical align. Even though it is an inline element the vertical-align property doesn't seem to work. Here is the JSFiddle.

HTML

<div>
    <span>Text</span> 
</div>

CSS

div {
    background: pink;
    width: 100%;
    height: 60px; }

span {
    vertical-align: middle; }

asked Jun 12 '14 at 05:16

user3704920

Because vertical-align doesn't work on inline elements. Change the display of your span to `inline-block`, and / or use `line-height` as @Deepika suggests. – random_user_name Jun 12 '14 at 05:21
span { vertical-align: middle; line-height:60px; } Put this in your code. – Deepika Jun 12 '14 at 05:22
@Deepika - the `vertical-align` won't do anything. The line-height will, so why have `vertical-align` at all? – random_user_name Jun 12 '14 at 05:23
@Deepika I believe I've seen in many examples that vertical align DOES in fact work on inline elements? – user3704920 Jun 12 '14 at 05:24
Am sorry, my mistake, remove the vertical-align from the code. – Deepika Jun 12 '14 at 05:24
It doesn't. Use `line-height`, `padding`, or some other method. But it simply doesn't, as your fiddle proves. – random_user_name Jun 12 '14 at 05:25
Yes, but I had been through same problem in which vertical-align did not work, line-height solved my problem. – Deepika Jun 12 '14 at 05:26
Add these styles `div { display: table }` `span { display : table-cell }` – 4dgaurav Jun 12 '14 at 05:27
I will be using the same amount of padding from top and bottom then. – user3704920 Jun 12 '14 at 05:28
`vertical-align` on inline-level elements (like `` is by default) works fine. It just doesn't do what you think it does. – Alohci Jun 12 '14 at 06:42
add this code `span { line-height: 60px; vertical-align: middle; }` – sanoj lawrence Nov 22 '14 at 21:08

Vertical Align in Span Doesn't Work?

0 Answers0