将带有CSS的图标旁边的多行文本垂直居中

Question

I have an inline ordered list that contains an image and some text. I'd like the text to be centered vertically next to the icon.

Here's a quick example with 1 and three lines of text. 2 lines should also be nicely aligned vertically.

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

Joomla is set to generate the menu as a list, so here's the code that I have to work with.

<ul class="menu" id="toolbox">
    <li class="item301">
        <a href="/business-services/publications.html">
           <img src="/images/stories/icon_publications.png" alt="publications" />
           <span>Publications</span>
        </a>
    </li>
    <li class="item302">
        <a href="/business-services/hamilton-business-directory.html">
           <img src="/images/stories/icon_business-directory.png" alt="business-directory" />
           <span>Business Directory</span>
        </a>
    </li>
</ul>

The css below works in Firefox, but not 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;
}

Is it possible to this using only css, or am I looking at editing the menu module or using some jquery?

Answer 1

Have you tried using:

display:inline-block;

It's been my best mate ever since I met him. He will behave just like a div but can be centered on text-align:center and also vertical-align:middle;

If you are supporting ie7 you will need to use this version:

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

Hope this helps

Answer 2

On this page you can see that the css-value "display: table-cell" is not supported by the internet explorer - excepted by IE8 (and IE9 I think): http://www.css4you.de/display.html#footer

I don't know much about joomla ... Does the editor select the displayed image? If not you can try to set the image as background-image and make use of the css-attribute "background-position: left center"

Answer 3

I don't think that is possible in all browser with the same result, like you said in FF it seems to do the trick right, whereas in other browser it messes up. The way I usually do this is with the image as a background of the link. It's also nicer because this way you can click on the image in order to navigate as well.

<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>

and 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);
}

Answer 4

Unfortunately none of those worked. So I ended up using some jquery to compensate for IE7. Here's what I used:

$(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);
  });
  }
});

Code was grabbed from http://vidasp.net/tinydemos/numberOfLines.html . This checks the number of lines in the span and adds an appropriate class to the span. I'll then add a margin-top for each of the classes that are generated.

Not the solution I was looking for, but it works.