Confusing text-align issues

Question

I am working on a website that helps people become more aware of the threats posed by the internet.

I have bumped into a VERY annoying css problem where the text will not center horizontally or vertically and generally doesn't seem to listen to the css properly. I have checked for anything overriding it and there's nothing.

http://nblackburn.me/pofa/

Answer 1

You're centering the text within the span, which isn't working because the span is only the size of the text. You need to either use a p element and use text-align:center with that, or add text-align:center to the parent of the span.

For aligning vertically, you can set the parent of an element to display:table; and the element to display:table-cell; vertical-align:middle;. This will vertically align the element.

Answer 2

Heres what I see in your CSS:

.sopa-box .title {
    font-size: 50px;
    font-weight: 700;
    text-shadow: 1px 1px 0px #111111;
    text-align: center;
}

Heres what it should be:

.title {
    font-size: 50px;
    font-weight: 700;
    text-shadow: 1px 1px 0px #111111;
    text-align: center;
}

That way when you use:

<div class="sopa-box">
     <span class="title">SOPA</span>
</div>

You wont have any problems.

Answer 3

display: block; and line-height:200px on .sopa-box .title will center both horizontally and vertically