Вертикально отцентрируйте несколько строк текста рядом с иконкой css - PullRequest
Новая
       0

Вертикально отцентрируйте несколько строк текста рядом с иконкой css

1 голос
/ 23 ноября 2010

У меня есть встроенный упорядоченный список, который содержит изображение и текст.Я бы хотел, чтобы текст располагался вертикально по центру рядом со значком.

Вот краткий пример с 1 и 3 строками текста.2 строки также должны быть хорошо выровнены по вертикали. 

|----|         |----| Somewhat
|    | Link    |    | longer
|----|         |----| Link

Joomla настроена для генерации меню в виде списка, поэтому вот код, с которым мне нужно работать.CSS ниже работает в Firefox, но не в IE. 

#toolbox a {
  padding: 0;
  display: inline;
  border: 0 none;
} 
#toolbox img {
  width: 42px;
  float: left;
}
#toolbox li {
  float: left;
  width: 105px;
  height: 42px;
}
#toolbox span {
  height: 42px;
  vertical-align: middle;
  display: table-cell;
  width: 60px;
}

Возможно ли это, используя только CSS, или я смотрю на редактирование модуля меню или использование некоторого jquery?

Ответы [ 4 ]

0 голосов
/ 25 ноября 2010

К сожалению, никто из них не работал.Поэтому я использовал jquery для компенсации IE7.Вот что я использовал: 

$(document).ready(function() {
  if ($.browser.msie && parseInt($.browser.version) == 7) {
  var lineHeight = parseInt( $("#toolbox span").css("lineHeight"), 10 );

$("#toolbox span").each(function() {
    var linesNbr = $(this).height() / lineHeight;
    $(this).addClass("lines" + linesNbr);
  });
  }
});

Код был взят из http://vidasp.net/tinydemos/numberOfLines.html. Это проверяет количество строк в промежутке и добавляет соответствующий класс в промежуток.Затем я добавлю поле для каждого из сгенерированных классов.

Не то решение, которое я искал, но оно работает.

0 голосов
/ 23 ноября 2010

На этой странице вы можете видеть, что css-значение "display: table-cell" не поддерживается Internet Explorer - за исключением IE8 (и, думаю, IE9): http://www.css4you.de/display.html#footer

Донне много знаю о Joomla ... Редактор выбирает отображаемое изображение?Если нет, вы можете попробовать установить изображение в качестве background-image и использовать атрибут css "background-position: left center"

0 голосов
/ 24 ноября 2010

Я не думаю, что это возможно во всех браузерах с одним и тем же результатом, как вы сказали в FF, похоже, все работает правильно, тогда как в других браузерах это не так. Я обычно делаю это с изображением в качестве фона ссылки. Это также лучше, потому что таким образом вы можете нажать на изображение, чтобы также перемещаться. 

<ul class="menu" id="toolbox">
    <li class="item301">
        <a class="link1" href="/business-services/publications.html">Publications</a>
    </li>
    <li class="item302">
        <a class="link2" href="/business-services/hamilton-business-directory.html">Business Directory</a>
    </li>
</ul>

и css: 

.menu a {
 background-position: left 50%;
 background-repeat: no-repeat;
 display: block;
 padding-left: $px /* $ = the width of your image plus a little more to space nicely */
}

.link1 {
 background-image: url(link1.png);
}

.link2 {
 background-image: url(link2.png);
}
0 голосов
/ 23 ноября 2010

Вы пытались использовать: 

display:inline-block;

Это был мой лучший друг с тех пор, как я встретил его.Он будет вести себя как div, но может быть центрирован на text-align: center, а также vertical-align:middle;

Если вы поддерживаете ie7, вам нужно будет использовать эту версию: 

display:inline-block;zoom:1; *display: inline;/*IE7 Fix*/

Надеюсь, это поможет

...