Jump to content
  • 0

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

nik70

Asked by nik70,

 Share

Question

nik70 Explorer

nik70

Posted
Posted

Люди, проясните ,пожалуйста!

Грызу мат. часть, наметился пробел в понимании. Вопрос в следующем:

1. Почему в ниже приведенном примере не работает выравнивание текста по вертикали, с помощью "vertical-align"? Конфликт инлайновых и блочных категорий?

2. Как при помощи CSS, в Div выравнять текст по вертикали без применения маржинов и пейжинов (что-нибудь типа text-align: center; - тока по вертикали...)? Утопия?

Капец, сам не угрызу... У кого есть разжеванное?

Спасибо за внимание.

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">

<TITLE>Документ без названия</TITLE>

<STYLE type="text/css">

<!--

.bb {

width: auto;

height: 400px;

font-weight:900;

text-align: center;

vertical-align:middle;

}

-->

</STYLE>

</HEAD>

<BODY>

<DIV class="bb">

<P>Как этот текст вертикально отцентрировать по вертикали? При помощи свойств CSS! Почему не работает vertical-align?</P>

</DIV>

</BODY>

</HTML>

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0
nik70 Explorer

nik70

Posted
  • Author
Posted (edited)

пробовал назначить диву

display: table;

vertical-align: middle;

текст жмется вверх... редиска. А надо по середине.

Как же обойтись без маржинов и пейжинов? Я думал это просто.

Кстати, PSYWALKER, Ваша подпись... Вы предпочитаете верстать в таблицах? Другими словами, Вы в первую очередь рассматриваете возможность и целесообразность табличной верстки? обещаю не спрашивать "почему?" написано много, но все в пользу дивов, поэтому заинтересовала Ваша подпись.

Edited by nik70
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
  nik70 said:
Кстати, PSYWALKER, Ваша подпись... Вы предпочитаете верстать в таблицах? Другими словами, Вы в первую очередь рассматриваете возможность и целесообразность табличной верстки? обещаю не спрашивать "почему?" написано много, но все в пользу дивов, поэтому заинтересовала Ваша подпись.

Да нет, просто люблю юмор :angry:

Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
  nik70 said:
Люди, проясните ,пожалуйста!

Грызу мат. часть, наметился пробел в понимании. Вопрос в следующем:

1. Почему в ниже приведенном примере не работает выравнивание текста по вертикали, с помощью "vertical-align"? Конфликт инлайновых и блочных категорий?

2. Как при помощи CSS, в Div выравнять текст по вертикали без применения маржинов и пейжинов (что-нибудь типа text-align: center; - тока по вертикали...)? Утопия?

Капец, сам не угрызу... У кого есть разжеванное?

Спасибо за внимание.

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

2. Превратить контейнер в ячейку таблицы при помощи display: table-cell

Link to comment
Share on other sites
  • 0
nik70 Explorer

nik70

Posted
  • Author
Posted
  s0rr0w said:
1. Потому что есть два различных поведения элементов. Если это не ячейка таблицы, то выравнивание применяется для инлайновых блоков относительно инлайн-бокса, в котором они находятся.

Спасибо, становится теплее в ситуации "display: table-cell"

Но в остальном полный мороз. Не пойму где я не пойМУ.

Подскажите, плиз где я не правильно рассуждаю, если я рассуждаю так:

"1. Назначая контейнеру "display: inline", я прошу, хоть не надолго (в конце концов требую) генерировать инлайн-бокс.

2. Назначая контейнеру "vertical-align: middle", я указываю правила выравнивания, в этом контейнере, для инлайн элементов.

3. Если, я вложу в контейнер текст, не заключенный в теги, то текст будет иметь инлайн свойства.

4. Если, я вложу в контейнер текст, заключенный в теги <P> и при помощи CSS, назначу ему "display: inline" то он будет иметь инлайн свойства.

5. Если в п.1-4 все правильно, то должно работать выравнивание текста по вертикали в следующем примере:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Документ без названия</title>

<style type="text/css">

<!--

.bb {

width: auto;

height: 400px;

font-weight:900;

text-align: center;

display: inline;

vertical-align: middle;

}

p { display: inline; }

-->

</style>

</head>

<body>

<div class="bb">

Как этот текст меня достал!!!!!!!

<p>А-а-а-а-а-а-а-а-а-а-а-а-а-а-а-а-а-а-а!</p>

</div>

</body>

</html>

однако не выравнивает, проверял в 4-ох браузерах, разных."

Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
  nik70 said:
5. Если в п.1-4 все правильно, то должно работать выравнивание текста по вертикали в следующем примере:

однако не выравнивает, проверял в 4-ох браузерах, разных."

Выравнивает. Вы путаете теплое с мягким. Почитайте для начала, что такое инлайновый бокс, с чем его едят.

Link to comment
Share on other sites
  • 0
nik70 Explorer

nik70

Posted
  • Author
Posted

прочитал еще некоторый раз. Спецификацию.

Неужели? Выравнивание происходит в инлайн боксе, высота которого регулируется с помощью 'line-height'. По этому я не видел изменений, т.к. ожидал изменений (выравнивания) относительно "height: 400px".

Так? Ну очень похоже!

Если так, то как(где) в этом случае проявляется "height: 400px" (код в первом топике) ? Игнорируется, т.к. согласно спецификации:

"Применяется: ко всем элементам, кроме незамещаемых инлайн-элементов, рядов таблиц и групп рядов"

Так штоли?

Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
  nik70 said:
прочитал еще некоторый раз. Спецификацию.

Неужели? Выравнивание происходит в инлайн боксе, высота которого регулируется с помощью 'line-height'. По этому я не видел изменений, т.к. ожидал изменений (выравнивания) относительно "height: 400px".

Так? Ну очень похоже!

Если так, то как(где) в этом случае проявляется "height: 400px" (код в первом топике) ? Игнорируется, т.к. согласно спецификации:

"Применяется: ко всем элементам, кроме незамещаемых инлайн-элементов, рядов таблиц и групп рядов"

Так штоли?

Похоже не правду.

Link to comment
Share on other sites
  • 0
oldor0 Explorer

oldor0

Posted
Posted

Я тоже долго ломал голову столкнувшись с такой же проблемой. в итоге решил таким образом:

<div>

<span><span>Как же этот текст меня задолбал!!!</span></span>

</div>

Стили в CSS

div {

position: relative;

}

div span {

display: block;

position: absolute;

top: 50%;

left: 0%;

width: 100%;

}

div span span {

position: relative;

top: -50%;

}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept