Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Центр текста, относительно вертикали изображения
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Центр текста, относительно вертикали изображения

Страниц (1): [1]
 

1. Predator - 18 Августа, 2012 - 08:40:55 - перейти к сообщению
Как не побывал свойство подставить не выходит.
CODE (html):
скопировать код в буфер обмена
  1. vertical-align: center;

Как правильно сделать так чтоб текст был по середине относительно вертикали изображения.
CODE (html):
скопировать код в буфер обмена
  1. /* Structure
  2. ------------------------------------------*/
  3. #coolMenu,
  4. #coolMenu ul {
  5.         list-style: none;
  6. }
  7. #coolMenu {
  8.         float: left;
  9. }
  10. #coolMenu > li {
  11.         float: left;
  12. }
  13. #coolMenu li a {
  14.         display: block;
  15.     height:22px;
  16.  
  17.         padding: 0 0.5em;
  18.         text-decoration: none;
  19. }
  20. #coolMenu ul {
  21.         position: absolute;
  22.         display: none;
  23.         z-index: 999;
  24. }
  25. #coolMenu ul li a {
  26.         width: 70px;
  27. }
  28. #coolMenu li:hover ul.noJS {
  29.         display: block;
  30. }
  31.  
  32.  
  33. /* Main menu
  34. ------------------------------------------*/
  35. #coolMenu {
  36.         font-family: Arial;
  37.         font-size: 12px;
  38.         background: url(http://wbg.png);
  39. }
  40. #coolMenu > li > a {
  41.         color: #fff;
  42.         font-weight: bold;
  43. }
  44. #coolMenu > li:hover > a {
  45.         background: url(http://ww_bg.png);
  46.         color: #AAAAAA;
  47. }
  48.  
  49.  
  50. /* Submenu
  51. ------------------------------------------*/
  52. #coolMenu ul {
  53.         background: url(http:/p_bg.png);
  54.     opacity: 0.9;
  55.    
  56.    
  57. }
  58. #coolMenu ul li a {
  59.         color: #fff;
  60.     float: left;
  61. }
  62. #coolMenu ul li:hover a {
  63.         background: #ffc97c;
  64.     opacity: 0.9;
  65. }


CODE (html):
скопировать код в буфер обмена
  1.  
  2. <ul id="coolMenu">     
  3. <li><img  style="border:none;" src="http:ges/home.gif"  />Главная</li>
  4. </ul>
  5.  
2. IllusionMH - 18 Августа, 2012 - 09:22:30 - перейти к сообщению
Predator, если высота известна - то line-heigth: XXpx;
а vertical-align: middle; для выравнивания текста по вертикали применим только к ячейкам таблицы либо блокам со свойством display: table-cell (это второй вариант)
3. Predator - 18 Августа, 2012 - 09:58:02 - перейти к сообщению
У меня получается, так что теперь текст верху. Как правильно будит?
4. tuareg - 18 Августа, 2012 - 10:40:04 - перейти к сообщению
IllusionMH пишет:
а vertical-align: middle; для выравнивания текста по вертикали применим только к ячейкам таблицы либо блокам со свойством display: table-cell (это второй вариант)

Если придираться Радость
inline-block или любой строчный элемент. Вообще вроде не плохо расписано (сам еще до конца не читал) цикл статей http://css-live[dot]ru/articles/ikf-[dot][dot][dot]ajny-css2-1[dot]html
5. IllusionMH - 18 Августа, 2012 - 12:10:19 - перейти к сообщению

tuareg, подловил Радость

Predator, все зависит от того, что хочется сделать. И так и не понятно - известна высота всех картинок или нет?
Как я понимаю - это пункты меню, тогда изображения лучше сделать фоном, иначе для него придется использовать float:left
http://jsfiddle[dot]net/naRCT/
6. DelphinPRO - 18 Августа, 2012 - 17:56:43 - перейти к сообщению
во-первых, протокол вовсе не обязательно указывать в урлах к картинкам. обычно пишется относительный путь.
во-вторых, сделай картинки к пунктам меню фоном. Фон можно отцентровать по вертикали background-position: left center;

Если меню однострочное, то для выравнивания тестка по вертикальному центру лучше делать с помощью line-height равным высоте блока. Здесь следует учитывать, что данное свойство, если оно указано в относительных единицах, расчитывается относительно размера шрифта своего элемента. (тебе для простоты лучше указать в пикселях)

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

 

Powered by ExBB FM 1.0 RC1