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.
Solution
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.
OTHER TIPS
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.
display: block;
and line-height:200px
on .sopa-box .title
will center both horizontally and vertically