垂直居中使用css的圖標旁邊的多行文本

我有一個內聯的有序列表，其中包含圖像和一些文本。我希望文字在圖標旁邊垂直居中。垂直居中使用css的圖標旁邊的多行文本

這裏有一個簡單的例子1個三行文字。 2行也應該垂直很好地對齊。

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

Joomla是設置生成的菜單列表，所以這裏的，我有工作的代碼。

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

下面的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？

來源

2010-11-23 Fireflight

不幸的是那些沒有工作的。所以我最終使用了一些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中攫取。這將檢查跨度中的行數並向跨度添加適當的類。然後，我會爲每個生成的類添加一個margin-top。

不是我一直在尋找的解決方案，但它的工作原理。

來源

2010-11-25 20:11:12 Fireflight

在我的情況下，這與Joomla加載的Mootools衝突，所以我有var j = jQuery。noConflict（）;在開始時用j代替了所有的$。 – Fireflight 2010-11-25 20:13:21

您是否嘗試過使用：

display:inline-block;

它已經自從我遇見了他我的最佳搭檔。他的行爲就像一個div，但可以在文本對齊居中：中心，也是vertical-align:middle;

如果要支持IE7，你將需要使用此版本：

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

希望這有助於

來源

2010-11-23 19:56:35 wilsonpage

不幸的是，它似乎一旦你有文本inline-block的多條線路正好對齊父的頂部。 – Fireflight 2010-11-24 19:31:27

在這個頁面上，你可以看到CSS-值「顯示：表細胞」不被Internet Explorer支持 - 通過IE8除外（和IE9我認爲）： http://www.css4you.de/display.html#footer

我對joomla的瞭解不多...... 編輯器是否選擇顯示的圖像？如果沒有，你可以嘗試將圖像作爲背景圖像，並使用的CSS屬性「背景位置：左中心」的

來源

2010-11-23 19:57:58 SimonSimCity

我不認爲這是可能具有相同結果的所有瀏覽器，如你在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); 
}

來源

2010-11-24 07:32:03 Bazzz

垂直居中使用css的圖標旁邊的多行文本

回答

相關問題