Задать вопрос
@VokERton
веб-разработка

Как центрировать кнопку по вертикали, относительно области просмотра в браузере?

Доброго времени.

Пытаюсь центрировать кнопку по вертикали, относительно области просмотра в браузере.

Код боковой кнопки:

<style>
 #order {
 position: fixed; 
 right: 0;
 top: 0; 
 }
 .rotated {
 writing-mode: tb-rl;
 transform: rotate(-180deg);
 }
</style>
<p class="buttond;" data-options="right, slide-down,size32,eachCounter1,eachCounter-right,counter0,upArrow-right;"><a class="rotated" target="_self" style="letter-spacing: 0.2em; cursor: pointer; font-size:15.4px; text-decoration: none; padding:15px 20px; color:#ffffff; background-color:#498BFA; border-radius:0px; border: 0px solid #ffffff;" onmouseover="this.style.backgroundColor='#7BABFB';" onmouseout="this.style.backgroundColor='#498BFA';" href="javascript:;" onclick="openchat();" id="order" letter-spacing: 0.2em;>ЗАКАЗ в 1 КЛИК</a></p>
<script type="text/javascript">function openchat(){new _uWnd('chat','Заказ в 1 клик',500,100,{align:0,shadow:0,close:1,autosize:1,maxh:600,minh:100,modal:1,resize:0,nomove:1}, $("#chat").html() )}</script> 
<div style="display:none;" id="chat">$MFORM_3$</div>


Прошу подсказки...
  • Вопрос задан
  • 54 просмотра
6 комментариев
Подписаться 1 Простой 6 комментариев
Решения вопроса 1
@VokERton Автор вопроса
Всем огромное, спасибо. Вопрос закрыт. Доработал с учетом ваших комментариев.

Вот что получилось:

<style>
 #order {
 position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
 }
 .rotated {
 writing-mode: tb-rl;
 transform: rotate(-180deg);
 }
</style>
<p class="buttond;" data-options="right, slide-down,size32,eachCounter1,eachCounter-right,counter0,upArrow-right;"><a class="rotated" target="_self" style="letter-spacing: 0.2em; cursor: pointer; font-size:15.4px; text-decoration: none; padding:15px 20px; color:#ffffff; background-color:#498BFA; border-radius:0px; border: 0px solid #ffffff;" onmouseover="this.style.backgroundColor='#7BABFB';" onmouseout="this.style.backgroundColor='#498BFA';" href="javascript:;" onclick="openchat();" id="order" letter-spacing: 0.2em;>ЗАКАЗ в 1 КЛИК</a></p>
<script type="text/javascript">function openchat(){new _uWnd('chat','Заказ в 1 клик',500,100,{align:0,shadow:0,close:1,autosize:1,maxh:600,minh:100,modal:1,resize:0,nomove:1}, $("#chat").html() )}</script> 
<div style="display:none;" id="chat">$MFORM_3$</div>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
le2xx
@le2xx
Можно так, будет всегда по середине по вертикали
.button {
  position: fixed;
  top: 0;
  bottom: 0;
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Веб-разработчик
Искра • Екатеринбург
от 80 000 до 100 000 ₽
Веб-разработчик
Art gorka • Санкт-Петербург
от 60 000 ₽
Веб-разработка и управление IT в Sortage
Sortage • Москва
от 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Помощь СММ-специалиста
25 апр. 2024, в 11:49
25000 руб./за проект
Помощь с СЕРМ
25 апр. 2024, в 11:37
40000 руб./за проект
Кастомизация стандартного функционала Битрикс24
25 апр. 2024, в 11:33
7000 руб./за проект
Ещё заказы