Как установить загрузчик моего сайта в середине экрана

-1

Я использую загрузчик моего сайта, но это позиция верхней части страницы, как реализовать в css для выравнивания центра sereen. Пожалуйста, проверьте мою ПОГРУЗЧИК пример Demo Как установить загрузчик моего сайта в середине экрана

\t #fountainTextG{ 
 
\t width:360px; 
 
\t margin:auto; 
 
} 
 

 
.fountainTextG{ 
 
\t color:rgb(242,155,97); 
 
\t font-family:Arial; 
 
\t font-size:38px; 
 
\t text-decoration:none; 
 
\t font-weight:normal; 
 
\t font-style:normal; 
 
\t float:left; 
 
\t animation-name:bounce_fountainTextG; 
 
\t \t -o-animation-name:bounce_fountainTextG; 
 
\t \t -ms-animation-name:bounce_fountainTextG; 
 
\t \t -webkit-animation-name:bounce_fountainTextG; 
 
\t \t -moz-animation-name:bounce_fountainTextG; 
 
\t animation-duration:2.09s; 
 
\t \t -o-animation-duration:2.09s; 
 
\t \t -ms-animation-duration:2.09s; 
 
\t \t -webkit-animation-duration:2.09s; 
 
\t \t -moz-animation-duration:2.09s; 
 
\t animation-iteration-count:infinite; 
 
\t \t -o-animation-iteration-count:infinite; 
 
\t \t -ms-animation-iteration-count:infinite; 
 
\t \t -webkit-animation-iteration-count:infinite; 
 
\t \t -moz-animation-iteration-count:infinite; 
 
\t animation-direction:normal; 
 
\t \t -o-animation-direction:normal; 
 
\t \t -ms-animation-direction:normal; 
 
\t \t -webkit-animation-direction:normal; 
 
\t \t -moz-animation-direction:normal; 
 
\t transform:scale(.5); 
 
\t \t -o-transform:scale(.5); 
 
\t \t -ms-transform:scale(.5); 
 
\t \t -webkit-transform:scale(.5); 
 
\t \t -moz-transform:scale(.5); 
 
}#fountainTextG_1{ 
 
\t animation-delay:0.75s; 
 
\t \t -o-animation-delay:0.75s; 
 
\t \t -ms-animation-delay:0.75s; 
 
\t \t -webkit-animation-delay:0.75s; 
 
\t \t -moz-animation-delay:0.75s; 
 
} 
 
#fountainTextG_2{ 
 
\t animation-delay:0.9s; 
 
\t \t -o-animation-delay:0.9s; 
 
\t \t -ms-animation-delay:0.9s; 
 
\t \t -webkit-animation-delay:0.9s; 
 
\t \t -moz-animation-delay:0.9s; 
 
} 
 
#fountainTextG_3{ 
 
\t animation-delay:1.05s; 
 
\t \t -o-animation-delay:1.05s; 
 
\t \t -ms-animation-delay:1.05s; 
 
\t \t -webkit-animation-delay:1.05s; 
 
\t \t -moz-animation-delay:1.05s; 
 
} 
 
#fountainTextG_4{ 
 
\t animation-delay:1.2s; 
 
\t \t -o-animation-delay:1.2s; 
 
\t \t -ms-animation-delay:1.2s; 
 
\t \t -webkit-animation-delay:1.2s; 
 
\t \t -moz-animation-delay:1.2s; 
 
} 
 
#fountainTextG_5{ 
 
\t animation-delay:1.35s; 
 
\t \t -o-animation-delay:1.35s; 
 
\t \t -ms-animation-delay:1.35s; 
 
\t \t -webkit-animation-delay:1.35s; 
 
\t \t -moz-animation-delay:1.35s; 
 
} 
 
#fountainTextG_6{ 
 
\t animation-delay:1.5s; 
 
\t \t -o-animation-delay:1.5s; 
 
\t \t -ms-animation-delay:1.5s; 
 
\t \t -webkit-animation-delay:1.5s; 
 
\t \t -moz-animation-delay:1.5s; 
 
} 
 
#fountainTextG_7{ 
 
\t animation-delay:1.64s; 
 
\t \t -o-animation-delay:1.64s; 
 
\t \t -ms-animation-delay:1.64s; 
 
\t \t -webkit-animation-delay:1.64s; 
 
\t \t -moz-animation-delay:1.64s; 
 
} 
 
#fountainTextG_8{ 
 
\t animation-delay:1.79s; 
 
\t \t -o-animation-delay:1.79s; 
 
\t \t -ms-animation-delay:1.79s; 
 
\t \t -webkit-animation-delay:1.79s; 
 
\t \t -moz-animation-delay:1.79s; 
 
} 
 
@keyframes bounce_fountainTextG{ 
 
\t 0%{ 
 
\t \t transform:scale(1); 
 
\t \t color:rgb(252,179,116); 
 
\t } 
 

 
\t 100%{ 
 
\t \t transform:scale(.5); 
 
\t \t color:rgb(255,255,255); 
 
\t } 
 
} 
 

 
@-o-keyframes bounce_fountainTextG{ 
 
\t 0%{ 
 
\t \t -o-transform:scale(1); 
 
\t \t color:rgb(252,179,116); 
 
\t } 
 

 
\t 100%{ 
 
\t \t -o-transform:scale(.5); 
 
\t \t color:rgb(255,255,255); 
 
\t } 
 
} 
 

 
@-ms-keyframes bounce_fountainTextG{ 
 
\t 0%{ 
 
\t \t -ms-transform:scale(1); 
 
\t \t color:rgb(252,179,116); 
 
\t } 
 

 
\t 100%{ 
 
\t \t -ms-transform:scale(.5); 
 
\t \t color:rgb(255,255,255); 
 
\t } 
 
} 
 

 
@-webkit-keyframes bounce_fountainTextG{ 
 
\t 0%{ 
 
\t \t -webkit-transform:scale(1); 
 
\t \t color:rgb(252,179,116); 
 
\t } 
 

 
\t 100%{ 
 
\t \t -webkit-transform:scale(.5); 
 
\t \t color:rgb(255,255,255); 
 
\t } 
 
} 
 

 
@-moz-keyframes bounce_fountainTextG{ 
 
\t 0%{ 
 
\t \t -moz-transform:scale(1); 
 
\t \t color:rgb(252,179,116); 
 
\t } 
 

 
\t 100%{ 
 
\t \t -moz-transform:scale(.5); 
 
\t \t color:rgb(255,255,255); 
 
\t } 
 
}

<div id="fountainTextG"><div id="fountainTextG_1" class="fountainTextG">M</div><div id="fountainTextG_2" class="fountainTextG">e</div><div id="fountainTextG_3" class="fountainTextG">n</div><div id="fountainTextG_4" class="fountainTextG">s</div><div id="fountainTextG_5" class="fountainTextG">o</div><div id="fountainTextG_6" class="fountainTextG">f</div><div id="fountainTextG_7" class="fountainTextG">t</div><div id="fountainTextG_8" class="fountainTextG">s</div></div>

Этот загрузчик из чистого CSS3 Java Script или другой библиотеки не включают в себя с этим.

источник

2016-06-02 Anmol Ratan Mohla

Возможная Дубликат [вертикального выравнивания элементов в DIV] (http://stackoverflow.com/questions/79461/vertical-alignment -of-elements-in-a-div) – Turnip

Определите ваш идентификатор #fountainTextG

position: absolute; 
left: 50%; 
top: 50%; 
margin-top: -20px; 
margin-left: -75px;

это CSS

\t #fountainTextG{ 
 
\t width: 360px; 
 
margin: auto; 
 
position: absolute; 
 
left: 50%; 
 
top: 50%; 
 
margin-top: -20px; 
 
margin-left: -75px; 
 
} 
 

 
.fountainTextG{ 
 
\t color:rgb(242,155,97); 
 
\t font-family:Arial; 
 
\t font-size:38px; 
 
\t text-decoration:none; 
 
\t font-weight:normal; 
 
\t font-style:normal; 
 
\t float:left; 
 
\t animation-name:bounce_fountainTextG; 
 
\t \t -o-animation-name:bounce_fountainTextG; 
 
\t \t -ms-animation-name:bounce_fountainTextG; 
 
\t \t -webkit-animation-name:bounce_fountainTextG; 
 
\t \t -moz-animation-name:bounce_fountainTextG; 
 
\t animation-duration:2.09s; 
 
\t \t -o-animation-duration:2.09s; 
 
\t \t -ms-animation-duration:2.09s; 
 
\t \t -webkit-animation-duration:2.09s; 
 
\t \t -moz-animation-duration:2.09s; 
 
\t animation-iteration-count:infinite; 
 
\t \t -o-animation-iteration-count:infinite; 
 
\t \t -ms-animation-iteration-count:infinite; 
 
\t \t -webkit-animation-iteration-count:infinite; 
 
\t \t -moz-animation-iteration-count:infinite; 
 
\t animation-direction:normal; 
 
\t \t -o-animation-direction:normal; 
 
\t \t -ms-animation-direction:normal; 
 
\t \t -webkit-animation-direction:normal; 
 
\t \t -moz-animation-direction:normal; 
 
\t transform:scale(.5); 
 
\t \t -o-transform:scale(.5); 
 
\t \t -ms-transform:scale(.5); 
 
\t \t -webkit-transform:scale(.5); 
 
\t \t -moz-transform:scale(.5); 
 
}#fountainTextG_1{ 
 
\t animation-delay:0.75s; 
 
\t \t -o-animation-delay:0.75s; 
 
\t \t -ms-animation-delay:0.75s; 
 
\t \t -webkit-animation-delay:0.75s; 
 
\t \t -moz-animation-delay:0.75s; 
 
} 
 
#fountainTextG_2{ 
 
\t animation-delay:0.9s; 
 
\t \t -o-animation-delay:0.9s; 
 
\t \t -ms-animation-delay:0.9s; 
 
\t \t -webkit-animation-delay:0.9s; 
 
\t \t -moz-animation-delay:0.9s; 
 
} 
 
#fountainTextG_3{ 
 
\t animation-delay:1.05s; 
 
\t \t -o-animation-delay:1.05s; 
 
\t \t -ms-animation-delay:1.05s; 
 
\t \t -webkit-animation-delay:1.05s; 
 
\t \t -moz-animation-delay:1.05s; 
 
} 
 
#fountainTextG_4{ 
 
\t animation-delay:1.2s; 
 
\t \t -o-animation-delay:1.2s; 
 
\t \t -ms-animation-delay:1.2s; 
 
\t \t -webkit-animation-delay:1.2s; 
 
\t \t -moz-animation-delay:1.2s; 
 
} 
 
#fountainTextG_5{ 
 
\t animation-delay:1.35s; 
 
\t \t -o-animation-delay:1.35s; 
 
\t \t -ms-animation-delay:1.35s; 
 
\t \t -webkit-animation-delay:1.35s; 
 
\t \t -moz-animation-delay:1.35s; 
 
} 
 
#fountainTextG_6{ 
 
\t animation-delay:1.5s; 
 
\t \t -o-animation-delay:1.5s; 
 
\t \t -ms-animation-delay:1.5s; 
 
\t \t -webkit-animation-delay:1.5s; 
 
\t \t -moz-animation-delay:1.5s; 
 
} 
 
#fountainTextG_7{ 
 
\t animation-delay:1.64s; 
 
\t \t -o-animation-delay:1.64s; 
 
\t \t -ms-animation-delay:1.64s; 
 
\t \t -webkit-animation-delay:1.64s; 
 
\t \t -moz-animation-delay:1.64s; 
 
} 
 
#fountainTextG_8{ 
 
\t animation-delay:1.79s; 
 
\t \t -o-animation-delay:1.79s; 
 
\t \t -ms-animation-delay:1.79s; 
 
\t \t -webkit-animation-delay:1.79s; 
 
\t \t -moz-animation-delay:1.79s; 
 
} 
 
@keyframes bounce_fountainTextG{ 
 
\t 0%{ 
 
\t \t transform:scale(1); 
 
\t \t color:rgb(252,179,116); 
 
\t } 
 

 
\t 100%{ 
 
\t \t transform:scale(.5); 
 
\t \t color:rgb(255,255,255); 
 
\t } 
 
} 
 

 
@-o-keyframes bounce_fountainTextG{ 
 
\t 0%{ 
 
\t \t -o-transform:scale(1); 
 
\t \t color:rgb(252,179,116); 
 
\t } 
 

 
\t 100%{ 
 
\t \t -o-transform:scale(.5); 
 
\t \t color:rgb(255,255,255); 
 
\t } 
 
} 
 

 
@-ms-keyframes bounce_fountainTextG{ 
 
\t 0%{ 
 
\t \t -ms-transform:scale(1); 
 
\t \t color:rgb(252,179,116); 
 
\t } 
 

 
\t 100%{ 
 
\t \t -ms-transform:scale(.5); 
 
\t \t color:rgb(255,255,255); 
 
\t } 
 
} 
 

 
@-webkit-keyframes bounce_fountainTextG{ 
 
\t 0%{ 
 
\t \t -webkit-transform:scale(1); 
 
\t \t color:rgb(252,179,116); 
 
\t } 
 

 
\t 100%{ 
 
\t \t -webkit-transform:scale(.5); 
 
\t \t color:rgb(255,255,255); 
 
\t } 
 
} 
 

 
@-moz-keyframes bounce_fountainTextG{ 
 
\t 0%{ 
 
\t \t -moz-transform:scale(1); 
 
\t \t color:rgb(252,179,116); 
 
\t } 
 

 
\t 100%{ 
 
\t \t -moz-transform:scale(.5); 
 
\t \t color:rgb(255,255,255); 
 
\t } 
 
}

<div id="fountainTextG"><div id="fountainTextG_1" class="fountainTextG">M</div><div id="fountainTextG_2" class="fountainTextG">e</div><div id="fountainTextG_3" class="fountainTextG">n</div><div id="fountainTextG_4" class="fountainTextG">s</div><div id="fountainTextG_5" class="fountainTextG">o</div><div id="fountainTextG_6" class="fountainTextG">f</div><div id="fountainTextG_7" class="fountainTextG">t</div><div id="fountainTextG_8" class="fountainTextG">s</div></div>

источник

2016-06-02 11:00:10

спасибо г-ну Рохиту, но зачем использовать позицию, для центрального положения мы использовали таблицу или таблицу-ячейку. –

если я не ошибаюсь, что вы скажете о таблице или таблице-ячейке –

да, вы можете использовать для отображения: table-cell; выравнивания текста: центр; вертикальные выравнивания: середина; Это гораздо больше способов сделать это –

Помещенный position: fixed и left/top к 50%. Использование отрицательного поля перемещает элемент назад через его половину ширины/высоты.

Кроме того, вместо использования flaot: left;display: inline-block

#fountainTextG { 
 
    width: 360px; 
 
    margin: auto; 
 
    position: fixed; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-top: -20px; 
 
    margin-left: -180px; 
 
    text-align: center; 
 
} 
 
.fountainTextG { 
 
    color: rgb(242, 155, 97); 
 
    font-family: Arial; 
 
    font-size: 38px; 
 
    text-decoration: none; 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    display: inline-block; 
 
    animation-name: bounce_fountainTextG; 
 
    -o-animation-name: bounce_fountainTextG; 
 
    -ms-animation-name: bounce_fountainTextG; 
 
    -webkit-animation-name: bounce_fountainTextG; 
 
    -moz-animation-name: bounce_fountainTextG; 
 
    animation-duration: 2.09s; 
 
    -o-animation-duration: 2.09s; 
 
    -ms-animation-duration: 2.09s; 
 
    -webkit-animation-duration: 2.09s; 
 
    -moz-animation-duration: 2.09s; 
 
    animation-iteration-count: infinite; 
 
    -o-animation-iteration-count: infinite; 
 
    -ms-animation-iteration-count: infinite; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -moz-animation-iteration-count: infinite; 
 
    animation-direction: normal; 
 
    -o-animation-direction: normal; 
 
    -ms-animation-direction: normal; 
 
    -webkit-animation-direction: normal; 
 
    -moz-animation-direction: normal; 
 
    transform: scale(.5); 
 
    -o-transform: scale(.5); 
 
    -ms-transform: scale(.5); 
 
    -webkit-transform: scale(.5); 
 
    -moz-transform: scale(.5); 
 
} 
 
#fountainTextG_1 { 
 
    animation-delay: 0.75s; 
 
    -o-animation-delay: 0.75s; 
 
    -ms-animation-delay: 0.75s; 
 
    -webkit-animation-delay: 0.75s; 
 
    -moz-animation-delay: 0.75s; 
 
} 
 
#fountainTextG_2 { 
 
    animation-delay: 0.9s; 
 
    -o-animation-delay: 0.9s; 
 
    -ms-animation-delay: 0.9s; 
 
    -webkit-animation-delay: 0.9s; 
 
    -moz-animation-delay: 0.9s; 
 
} 
 
#fountainTextG_3 { 
 
    animation-delay: 1.05s; 
 
    -o-animation-delay: 1.05s; 
 
    -ms-animation-delay: 1.05s; 
 
    -webkit-animation-delay: 1.05s; 
 
    -moz-animation-delay: 1.05s; 
 
} 
 
#fountainTextG_4 { 
 
    animation-delay: 1.2s; 
 
    -o-animation-delay: 1.2s; 
 
    -ms-animation-delay: 1.2s; 
 
    -webkit-animation-delay: 1.2s; 
 
    -moz-animation-delay: 1.2s; 
 
} 
 
#fountainTextG_5 { 
 
    animation-delay: 1.35s; 
 
    -o-animation-delay: 1.35s; 
 
    -ms-animation-delay: 1.35s; 
 
    -webkit-animation-delay: 1.35s; 
 
    -moz-animation-delay: 1.35s; 
 
} 
 
#fountainTextG_6 { 
 
    animation-delay: 1.5s; 
 
    -o-animation-delay: 1.5s; 
 
    -ms-animation-delay: 1.5s; 
 
    -webkit-animation-delay: 1.5s; 
 
    -moz-animation-delay: 1.5s; 
 
} 
 
#fountainTextG_7 { 
 
    animation-delay: 1.64s; 
 
    -o-animation-delay: 1.64s; 
 
    -ms-animation-delay: 1.64s; 
 
    -webkit-animation-delay: 1.64s; 
 
    -moz-animation-delay: 1.64s; 
 
} 
 
#fountainTextG_8 { 
 
    animation-delay: 1.79s; 
 
    -o-animation-delay: 1.79s; 
 
    -ms-animation-delay: 1.79s; 
 
    -webkit-animation-delay: 1.79s; 
 
    -moz-animation-delay: 1.79s; 
 
} 
 
@keyframes bounce_fountainTextG { 
 
    0% { 
 
    transform: scale(1); 
 
    color: rgb(252, 179, 116); 
 
    } 
 
    100% { 
 
    transform: scale(.5); 
 
    color: rgb(255, 255, 255); 
 
    } 
 
} 
 
@-o-keyframes bounce_fountainTextG { 
 
    0% { 
 
    -o-transform: scale(1); 
 
    color: rgb(252, 179, 116); 
 
    } 
 
    100% { 
 
    -o-transform: scale(.5); 
 
    color: rgb(255, 255, 255); 
 
    } 
 
} 
 
@-ms-keyframes bounce_fountainTextG { 
 
    0% { 
 
    -ms-transform: scale(1); 
 
    color: rgb(252, 179, 116); 
 
    } 
 
    100% { 
 
    -ms-transform: scale(.5); 
 
    color: rgb(255, 255, 255); 
 
    } 
 
} 
 
@-webkit-keyframes bounce_fountainTextG { 
 
    0% { 
 
    -webkit-transform: scale(1); 
 
    color: rgb(252, 179, 116); 
 
    } 
 
    100% { 
 
    -webkit-transform: scale(.5); 
 
    color: rgb(255, 255, 255); 
 
    } 
 
} 
 
@-moz-keyframes bounce_fountainTextG { 
 
    0% { 
 
    -moz-transform: scale(1); 
 
    color: rgb(252, 179, 116); 
 
    } 
 
    100% { 
 
    -moz-transform: scale(.5); 
 
    color: rgb(255, 255, 255); 
 
    } 
 
}

<div id="fountainTextG"> 
 
    <div id="fountainTextG_1" class="fountainTextG">M</div> 
 
    <div id="fountainTextG_2" class="fountainTextG">e</div> 
 
    <div id="fountainTextG_3" class="fountainTextG">n</div> 
 
    <div id="fountainTextG_4" class="fountainTextG">s</div> 
 
    <div id="fountainTextG_5" class="fountainTextG">o</div> 
 
    <div id="fountainTextG_6" class="fountainTextG">f</div> 
 
    <div id="fountainTextG_7" class="fountainTextG">t</div> 
 
    <div id="fountainTextG_8" class="fountainTextG">s</div> 
 
</div>

источник

2016-06-02 11:00:43 Justinas

Как установить загрузчик моего сайта в середине экрана

ответ

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