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

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Центр текста, относительно вертикали изображения

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Без описания
Поиск в теме | Версия для печати
Predator
Отправлено: 18 Августа, 2012 - 08:40:55
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 619
Дата рег-ции: Март 2012  
Откуда: Ярославль


Помог: 0 раз(а)

[+][+][+]
Как не побывал свойство подставить не выходит.
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.  

(Отредактировано автором: 18 Августа, 2012 - 08:42:45)

 
 Top
IllusionMH
Отправлено: 18 Августа, 2012 - 09:22:30
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
Predator, если высота известна - то line-heigth: XXpx;
а vertical-align: middle; для выравнивания текста по вертикали применим только к ячейкам таблицы либо блокам со свойством display: table-cell (это второй вариант)

(Отредактировано автором: 18 Августа, 2012 - 09:26:07)

 
 Top
Predator
Отправлено: 18 Августа, 2012 - 09:58:02
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 619
Дата рег-ции: Март 2012  
Откуда: Ярославль


Помог: 0 раз(а)

[+][+][+]
У меня получается, так что теперь текст верху. Как правильно будит?
 
 Top
tuareg
Отправлено: 18 Августа, 2012 - 10:40:04
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
IllusionMH пишет:
а vertical-align: middle; для выравнивания текста по вертикали применим только к ячейкам таблицы либо блокам со свойством display: table-cell (это второй вариант)

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



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)

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

Predator, все зависит от того, что хочется сделать. И так и не понятно - известна высота всех картинок или нет?
Как я понимаю - это пункты меню, тогда изображения лучше сделать фоном, иначе для него придется использовать float:left
http://jsfiddle[dot]net/naRCT/

(Отредактировано автором: 18 Августа, 2012 - 12:11:27)

 
 Top
DelphinPRO
Отправлено: 18 Августа, 2012 - 17:56:43
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
во-первых, протокол вовсе не обязательно указывать в урлах к картинкам. обычно пишется относительный путь.
во-вторых, сделай картинки к пунктам меню фоном. Фон можно отцентровать по вертикали background-position: left center;

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

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


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB