Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.68/25: Рейтинг темы: голосов - 25, средняя оценка - 4.68
Ушел наливать чай
188 / 138 / 32
Регистрация: 02.03.2013
Сообщений: 650
1

Как расположить текст вертикально по центру к <label>?

11.01.2017, 17:05. Показов 4662. Ответов 1
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Есть стилизованный переключатель, мне нужно отцентровать текст по вертикали, кто подскажет как это провернуть?
HTML5
1
2
3
4
5
6
7
<div id="translate-switch">
    <label class="switch">
        <input type="checkbox" id="translate-checkbox" checked="checked">
        <div class="slider"></div>
    </label>
    <div id="switch-text"><h3>Переводить статусы</h3></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
 
/* Hide default HTML checkbox */
.switch input {display:none;}
 
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
 
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
 
input:checked + .slider {
  background-color: #5CB85C;
}
 
input:focus + .slider {
  box-shadow: 0 0 1px #5CB85C;
}
 
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
 
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
 
.slider.round:before {
  border-radius: 50%;
}
 
#switch-text{
    display:inline-block;
}
JsFiddle: https://jsfiddle.net/qr5y7ay8/

Добавлено через 9 минут
Пока на ум пришел такой костыль:
CSS
1
2
3
4
5
#switch-text{
    display:inline-block;
    position: relative;
    top:-15px;
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
11.01.2017, 17:05
Ответы с готовыми решениями:

Как расположить Label сверху и по центру формы?
Подскажите, как расположить label сверху и по центру формы ?

Как вывести текст вертикально по центру в окнах STATIC и EDIT
создаю окно STATIC и EDIT: case WM_CREATE: hFont = GetStockObject (DEFAULT_GUI_FONT); ...

Как выровнять текст вертикально по центру рядом с картинкой (html)?
&lt;table border='1'&gt; &lt;tr&gt; &lt;td&gt;la-la&lt;/td&gt; &lt;td&gt;Tarla-blah&lt;img src='pic.gif'&gt;&lt;/td&gt; ...

Как написать в Label (текст) не горизонтально, а вертикально
Очень нужно!!!

1
Эксперт JSЭксперт HTML/CSS
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
11.01.2017, 17:17 2
CSS
1
2
3
4
5
6
.switch {
  vertical-align:middle;
}
#switch-text{
  display:inline-block;    
}
1
11.01.2017, 17:17
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
11.01.2017, 17:17
Помогаю со студенческими работами здесь

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

Label почему текст в нем по центру, как прибить к левой стороне ?
f = open('1.txt', 'r') line = f.read() label1 = Label(fra1, text=line, bg=&quot;black&quot;, fg=&quot;white&quot;)...

Какое значение присвоить свойству DIR чтоб текст расположить вертикально?
Какое значение присвоить свойству DIR чтоб текст расположить вертикально??

Расположить текст по центру
&lt;TextView android:id=&quot;@+id/textView8&quot; android:layout_width=&quot;match_parent&quot; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru