CODEWITHSUNDEEP
htmlcssvertical-alignment
user2601006
user2601006

Reputation: 35

Center Text Vertically Not working in IE and Firefox

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;
}

Upvotes: 1

Views: 89

Answers (2)

Ben Philipp
Ben Philipp

Reputation: 1877

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/

Upvotes: 2

Marek Lis&#253;
Marek Lis&#253;

Reputation: 3401

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>

Upvotes: 1

Related Questions