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

здравствуйте, делаю так:
/*выравнивание текста - left - влево, right - вправо, center - посредине, justify - по ширине*/
  text-align: center;
/*выравнивание текста по вертикали middle - средний*/
  vertical-align: middle;
по горизонтали работает, а по вертикале нет, мой ляп? где?
10 ответов

понял, а почему в предложенном Вами варианте
/*padding - отступ ленточки*/ 
  padding: 0.5em 2em 1.5em;
задаётся три размера?


блин, тут хоть логика есть
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;
ну здесь же
margin: 15px 5px 10px 5px;
/*могут быть заменены на*/
margin: 15px 5px 10px;
неподъёмная логика, но Вы здесь не при чём )


Привыкнете))) Сначала так Потом так А потом так Удачи)


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


Весь код)))


ОК: html
<!--заголовок сайта - ленточка-->   
<div class="non-semantic-protector">
<h1 class="ribbon"> 
<strong class="ribbon-content">джентльменский набор</strong> 
</h1> 
</div>
css
 /*селектор класса*/
 .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;}
видимо это я не правильно понимаю, потому как проверил со значением 1
/*высота ленточки*/  
  height: 1px;


По Вашей верстке бедолага h1 просто не помещается в отведенное ему место. Смотрите - голубая полосочка посередине. Потому и не выравнивается - не в чем. Он там как в бочке, еще и ноги торчат) См картинку.Посему предлагаю выровнять вот так. Пропишите такие паддинги для .ribbon
padding: 0.5em 2em 1.5em;
Свободнее ему не станет, но визуально будет нормально.


спасибо, а в этой части:
/*высота ленточки*/ * * height: 1px;
это не высота ленточки? а что?


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