Выравнивание по вертикали

@Ципихович Эндрю · Регистрация: 10.04.2009

Студворк — интернет-сервис помощи студентам

здравствуйте, делаю так:

CSS
1
2
3
4
/*выравнивание текста - left - влево, right - вправо, center - посредине, justify - по ширине*/
  text-align: center;
/*выравнивание текста по вертикали middle - средний*/
  vertical-align: middle;

по горизонтали работает, а по вертикале нет, мой ляп? где?

@Taatshi · 02.09.2012, 08:42

Весь код)))

@Ципихович Эндрю · 02.09.2012, 08:48 **[ТС]**

ОК:
html

HTML5
1
2
3
4
5
6
<!--заголовок сайта - ленточка--> 
<div class="non-semantic-protector">
<h1 class="ribbon"> 
<strong class="ribbon-content">джентльменский набор</strong> 
</h1> 
</div>

css

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 /*селектор класса*/
 .ribbon { 
/*размер текста на ленточке*/ 
  font-size: 20px !important;
/*ширина ленточки относительно родителя, где она находится*/  
  width: 80%; 
/*высота ленточки*/  
  height: 10px; 
  position: relative; 
/*фон ленточки - #ba89b6 - фиолетовый*/ 
  background: #ba89b6; 
/*цвет текста - #ff0000 - красный цвет*/
  color: #ff0000; 
/*выравнивание текста - left - влево, right - вправо, center - посредине, justify - по ширине*/
  text-align: center;
/*выравнивание текста по вертикали middle - средний*/
  vertical-align: middle; 
  padding: 1em 2em;
/*жирность шрифта, normal - нормальный, который установлен по умолчанию, bold - полужирный, жирность шрифта с шагом в 100 от 100 до 900*/
  font-weight: 900;  
  margin: 2em auto 3em;
/*отступ сверху страницы*/
  margin-top: 5px;
/*регист текста - uppercase - верхний регистр, lowercase - нижний регистр, capitalize - каждая первая буква слова с большой буквы*/
  text-transform: uppercase;
  
/*курсивный шрифт*/
/*font-style: italic;*/
 
/*none - не подчёркивать текст, стоит по умолчанию, удобно, когда нужно убрать подчёркивание у ссылок*/
/*underline - подчёркивание под текстом*/
/*overline - подчёркивание над текстом*/
/*line-through - перечёркивание текста*/
/*text-decoration: underline;*/
 
/*расстояние между словами - normal - нормальный, установлен по умолчанию*/
/*word-spacing: normal;*/
 
/*расстояние между буквами - normal - нормальный, установлен по умолчанию*/
/*letter-spacing: normal;*/
} 
 
.ribbon:before, .ribbon:after { 
  content: ""; 
  position: absolute; 
  display: block; 
  bottom: -1em; 
  border: 1.5em solid #986794; 
  z-index: -1; 
} 
.ribbon:before { 
  left: -2em; 
  border-right-width: 1.5em; 
  border-left-color: transparent; 
} 
.ribbon:after { 
  right: -2em; 
  border-left-width: 1.5em; 
  border-right-color: transparent; 
} 
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after { 
  content: ""; 
  position: absolute; 
  display: block; 
  border-style: solid; 
  border-color: #804f7c transparent transparent transparent; 
  bottom: -1em; 
} 
.ribbon .ribbon-content:before { 
  left: 0; 
  border-width: 1em 0 0 1em; 
} 
.ribbon .ribbon-content:after { 
  right: 0; 
  border-width: 1em 1em 0 0; 
} 
.non-semantic-protector {position: relative; z-index: 1;}

Добавлено через 2 минуты
видимо это я не правильно понимаю, потому как проверил со значением 1

CSS
1
2
/*высота ленточки*/  
  height: 1px;

@Taatshi · 02.09.2012, 09:07

По Вашей верстке бедолага h1 просто не помещается в отведенное ему место. Смотрите - голубая полосочка посередине. Потому и не выравнивается - не в чем. Он там как в бочке, еще и ноги торчат) См картинку.

Посему предлагаю выровнять вот так. Пропишите такие паддинги для .ribbon

CSS
1
padding: 0.5em 2em 1.5em;

Свободнее ему не станет, но визуально будет нормально.

@Ципихович Эндрю · 02.09.2012, 09:09 **[ТС]**

спасибо, а в этой части:

Сообщение от Ципихович Эндрю

/*высота ленточки*/ *
* height: 1px;

это не высота ленточки? а что?

@Taatshi · 02.09.2012, 09:13

Ну, там не 1 а 10 пикселей и да, это высота ленточки. Но учитывайте, что реальная высота высчитывается так:

заявленная высота + вертикальные отступы. Т.е. Вы, когда прописываете высоту, должны считать ее вместе с отступами.

@Ципихович Эндрю · 02.09.2012, 09:18 **[ТС]**

понял, а почему в предложенном Вами варианте

HTML5
1
2
/*padding - отступ ленточки*/ 
  padding: 0.5em 2em 1.5em;

задаётся три размера?

@Taatshi · 02.09.2012, 09:21

сокращенные формы записи свойств css

@Ципихович Эндрю · 02.09.2012, 09:27 **[ТС]**

блин, тут хоть логика есть

CSS
1
2
3
4
5
6
7
8
9
10
11
12
margin-top: 15px;
margin-right: 0;
margin-bottom: 5px;
margin-left: 20px; 
/*четыре строчки выше идентичны следующей: */ 
margin: 15px 0 5px 20px;
margin: 15px 0 15px 0;
/*смело заменяются на*/
margin: 15px 0;
margin: 15px 15px 15px 15px;
/*идентичны*/
margin: 15px;

ну здесь же

CSS
1
2
3
margin: 15px 5px 10px 5px;
/*могут быть заменены на*/
margin: 15px 5px 10px;

неподъёмная логика, но Вы здесь не при чём

)

@Taatshi · 02.09.2012, 09:33

Привыкнете)))

Сначала так

Потом так

А потом так

Удачи)

@Ципихович Эндрю · 02.09.2012, 09:34 **[ТС]**

сорри забыл правило часовой стрелки, спасибо!!!

Новые блоги и статьи Все статьи Все блоги /
Перемещение выделенных строк ТЧ из одного документа в другой Maks 30.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	02.09.2012, 08:42
	Весь код))) 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	02.09.2012, 09:13
	Ну, там не 1 а 10 пикселей и да, это высота ленточки. Но учитывайте, что реальная высота высчитывается так: заявленная высота + вертикальные отступы. Т.е. Вы, когда прописываете высоту, должны считать ее вместе с отступами. 1

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	02.09.2012, 09:21
	сокращенные формы записи свойств css 1

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	02.09.2012, 09:33
	Привыкнете))) Сначала так Потом так А потом так Удачи) 0

@Ципихович Эндрю 1712 / 579 / 76 Регистрация: 10.04.2009 Сообщений: 9,328
	02.09.2012, 09:34 [ТС]
	сорри забыл правило часовой стрелки, спасибо!!! 0