Центр текста по вертикали Не работает в IE и Firefox

Я пытаюсь создать страницу-заполнитель для своего сайта, но столкнулся с некоторыми проблемами, касающимися совместимости между браузерами. Он отлично работает на Chrome и моем мобильном устройстве iOS на моем телефоне и iPad, но не на IE или FireFox. Я пробовал несколько методов вертикального выравнивания, но не могу заставить их работать нормально. Есть ли что-то, что мне не хватает или есть способ сделать это, чтобы правильно отображать все браузеры? Спасибо!Центр текста по вертикали Не работает в IE и Firefox

Живой Сайт: 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; 
}

источник

2015-05-19 user2601006

Ссылка на живой сайт отключена. – SaidbakR

Да, я только что исправил его – user2601006

'float: center' не существует. См. [Элементы, размещенные в центре] (http://stackoverflow.com/questions/4767971/how-do-i-center-float-elements). Я тестировал в IE. Я не могу сказать, правильно ли позиционируется, или заголовок просто скрыт за другим элементом (холстом). Можете ли вы описать свои собственные выводы? – GolezTrol

чистое решение CSS: (требует .title иметь набор высоты)

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

посмотреть здесь: https://jsfiddle.net/svArtist/cn5fb6ua/

источник

2015-05-19 22:10:10

Прекрасно работает! Спасибо! – user2601006

Вертикальный ALIGMENT всегда сложно, так как она не поддерживается в CSS неявно. Вы можете попробовать некоторые хаки, например, в this question или в this one, но если он все еще не работает для вас, самым простым решением является использование javascript/jQuery. Было бы что-то вроде этого (плюс делает .title абсолютно позиционирован):

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

Если вы не знаете, как использовать JavaScript/JQuery, просто вставьте код, приведенный выше в страницу (например, в головной части) наряду с импортом JQuery: <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

источник

2015-05-19 22:01:50

Это работает, но, похоже, мешает другим скриптам на Спасибо за помощь! – user2601006

Центр текста по вертикали Не работает в IE и Firefox

ответ

Смежные вопросы