Center Text Vertically Not working in IE and Firefox

Question

I am trying to create a placeholder page for my website but have run into some issues regarding cross browser compatibility. It works just fine on chrome and my mobile iOS on my phone and iPad but not on IE or FireFox. I have tried several methods of vertical alignment but can't seem to get any of them to work properly. Is there something I'm missing or is there a way to do this to display correctly across all browsers? Thanks a bunch!

Live Site: http://www.radicalcreation.com

HTML:

<html>

    <head>

        <title>Radical Creation</title>

        <link rel="stylesheet" type="text/css" href="default.css"/>
        <link rel="shortcut icon" href= "images/favicon.png"/>
        <link rel="icon" href="images/favicon.png" type="image/x-icon">
        <!-- JavaScript Links -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="jscript/s3Slider.js"></script>
<!--    <script type="text/javascript" src="/jscript/jquery-1.4.1.min.js"></script>
        <script type="text/javascript" src="/jscript/custom.js"></script> -->
        <script type='text/javascript' src='js/jquery-1.11.1.min.js'></script>
        <script type='text/javascript' src='js/jquery.particleground.min.js'></script>
        <script type='text/javascript' src='js/demo.js'></script>

    </head>

    <body>



            <div class="title">
            <div class="main-title"><span class="thin">Radical</span>Creation</div>
            <h3>Coming Soon!</h3>
            </div>

        <div id="particles">
        </div>

    </body>

    </html>

CSS:

html {
    height: 100%;
    overflow:hidden;
}
body {
    font-family: ‘Lucida Console’, Monaco, monospace;
    background-repeat: none;
    background-size: cover;
    background-position: center;
    background-image: url(images/stars.jpg);
}

h2, h3 {
    font-weight: lighter;
    color: #4EB4FC;
    position: relative;
}


.title{
    margin-top: -100px;
    top: 54%;
    text-align: center;
    position: relative;
    float: center;
}

.main-title .thin {
    font-weight: 200;
}

.main-title {
    top:10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 30px;
    color: #f9f1e9;
    font-family: 'Raleway', Calibri, Arial, sans-serif;
    transform : scale(1.0,0.8);
    -webkit-transform:scale(1.2,1.0); /* Safari and Chrome */
    -moz-transform:scale(1.0,0.8); /* Firefox */
    -ms-transform:scale(1.0,0.8); /* IE 9+ */
    -o-transform:scale(1.0,0.8); /* Opera */
}

#particles {
    top: -5px;
    height:100%;
    opacity: .6;
}

`float: center` doesn't exist. See [Center floated elements](http://stackoverflow.com/questions/4767971/how-do-i-center-float-elements). I tested in IE. I can't really tell whether the positioning is wrong, or the title is just hidden behind another element (the canvas). Can you describe your own findings? — GolezTrol, May 19 '15 at 21:54
The `.title` object had a negative top margin that moved it outside the ``. (It had a `top: 54%;` rule, but was set to `position: relative;`, which will react differently on different browsers when there is no sibling element — Ben Philipp, May 19 '15 at 22:15

score 2 · Accepted Answer · answered May 19 '15 at 22:10

2

A pure CSS solution: (requires the .title to have a set height)

.title{
text-align: center;
width: 100%;
position: absolute;
top: 0%;
bottom: 0%;
height: 100px;
margin: auto;
}

see here: https://jsfiddle.net/svArtist/cn5fb6ua/

answered May 19 '15 at 22:10

Ben Philipp

1,832
1
14
29

Works beautifully! Thanks a bunch! – user2601006 May 19 '15 at 22:15

score 1 · Answer 2 · edited May 23 '17 at 12:30

Vertical aligment is always tricky, since it's not supported in CSS implicitly. You can try some hacks like in this question or in this one, yet if it still doesn't work for you, the easiest solution is to use javascript/jQuery. It would be something like this (plus making .title absolutely positioned):

<script>
$(function () {
  $(window).on('resize', function () {
    var title = $('.title');
    var top = $(window).height() / 2 - title.outerHeight() / 2;
    $('.title').css('top', top + 'px');
  }).trigger('resize');
});
</script>

If you don't know how to use javascript/jQuery, just paste the code above into your page (e.g. in the head section), along with the import of jQuery: <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

That works but seems to interfere with the other scrips on the page. Thanks for the help though! — user2601006, May 19 '15 at 22:15

Center Text Vertically Not working in IE and Firefox

2 Answers2