Question

我想在图像底部对齐菜单文本如何实现它？

预期输出：

Image    Image    Image    Image
[menutext]    [menutext][menutext]    [menutext]

实际输出：

Image[menutext]      Image[menutext]      Image[menutext]      Image[menutext]

我的Css代码：

#vilaniHeader
{
    margin: 0;
    padding: 0;
    height: 80px;
    background-color: Black;
}

#vilaniHeader h1
{
    padding-left: 15%;
    font: Arial;
    font-size: 30px;
    color: #ffffff;
    font-weight: bold;
    float: left;
}
#vilaniHeader #menu
{
    color: #ffffff;
    font: Arial;
    font-size: 18px;
    font-weight: bold;
    padding-top: 30px;
    padding-left: 30%;
}

#vilaniHeader #menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    padding-right: 300px;
    padding-bottom: 300px;

}
#vilaniHeader #menu li
{
    display: inline;
    margin: 0 15px 0 15px;
    float: none;
    text-align:center;

}

#vilaniHeader #menu a
{
    text-decoration: none;
    color: #ffffff;
}
#vilaniHeader #menu .menuHome
{
    color: red;
    clear:both;
    padding-top:50px;
    background-image:url:("Styles/menuHome.png") ;
    vertical-align:text-top;
}

和我的HTML代码

<div id="vilaniHeader">
                <h1>
                   Comany name
                </h1>
                <div id="menu">
                 <ul>
                 <li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
                 <li><a href="About.aspx">Car</li>
                 <li><a href="About.aspx">Mobile</li>
                 <li><a href="About.aspx">OldThings</li>
                 <li><a href="About.aspx">Matrimoni</li>
                 </ul>
                </div>
            </div>

我希望菜单文本应该在图像底部对齐，请帮我做。

Answer 1

我根据tejash的答案提出了这个解决方案。我的回答证实并且对搜索引擎友好。

我更喜欢在div中使用链接，但我想这将使用ul
我使用的背景图片无法显示CSS是否已禁用
我使用显示为块的跨度集，因为标记内的div不验证
我使用类来放置图像，但如果你想为每个链接添加不同的图片，则使用id
根据您的需要更改宽度+高度

HTML

<div id="nav">
    <a href="#"><span class="image"></span><span>About Us</span></a>
    <a href="#"><span class="image"></span><span>Investors</span></a>
</div>

CSS

#nav a {
    display:block; 
    float: left;
    width:100px; 
}
.image {
    display:block;
    background: url("myimage.jpg") no-repeat scroll center center transparent;
    height:40px;
    width:100px; 
}

Answer 2

使img成为一个块元素，以便之后占据整个宽度/换行符。

#menu li { display:block; }

就是这样。

Answer 3

您可以这样做，显然替换我使用的图像样本。要使链接生效，您可以在LI上使用jQuery点击事件，以便搜索所点击的LI内的链接，然后打开所需的链接。

http://jsfiddle.net/WcePK/

<强> HTML

<ul>
    <li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
    <li style="background-image: url('http://jsfiddle.net/img/logo.png')"><a href="About.aspx">Car</a></li>
    <li style="background-image: url('http://jsfiddle.net/img/logo.png')"><a href="About.aspx">Mobile</a></li>
    <li style="background-image: url('http://jsfiddle.net/img/logo.png')"><a href="About.aspx">OldThings</a></li>
    <li style="background-image: url('http://jsfiddle.net/img/logo.png')"><a href="About.aspx">Matrimoni</a></li>
</ul>

<强> CSS

LI {
      float: left;
      margin: 5px;
      padding: 50px 10px 10px;
      min-width: 100px;
      background-repeat: no-repeat;
      background-position: center 10px;
      background-color: #366D93;
      text-align: center;
      cursor: pointer
}

Answer 4

我建议在文本上添加一些包装器，使图像和包装器都显示：block; 您可以使用span标记作为文本的包装。

HTML

<ul>
<li><a><img src="Styles/menuHome.png" /><span>Home</span></a></li>
</ul>

CSS

li img，li span { 显示：块; }

Answer 5

如果您希望文字覆盖图片，但在底部，则应尝试使用line-height属性。这将导致你的文字向下移动，因此它将位于它的行的中心。

Answer 6

我有两个解决方案。 style1适用于文字小于图片的商品。 style2适用于文字比图片宽的项目。最简单的方法是确保图像总是比文本更宽或更小，这样您只需要一种风格。

<强> CSS：

#menu {
    list-style:none
}
#menu li {
    float:left;
    text-align:center
}
#menu .style1 img, #menu .style2 span {
    overflow:hidden
}
#menu .style1 span, #menu .style2 img {
    display:block
}

<强> HTML：

<div id="vilaniHeader">
    <h1>Comany name</h1>
    <ul id="menu">
        <li class="style1"><img src="Styles/menuHome.png" width="10" alt="" /> <span>Home</span></li>
        <li class="style2"><img src="Styles/menuHome.png" width="100" alt="" /> <span>Car</span></li>
    </ul>
</div>

我不是span - 粉丝，但似乎没有这里你就做不到。

顺便说一下，为什么不添加br？

<强> CSS：

#menu {
    list-style:none
}
#menu li {
    float:left;
    text-align:center
}

<强> HTML：

<div id="vilaniHeader">
    <h1>Comany name</h1>
    <ul id="menu">
        <li><img src="Styles/menuHome.png" width="10" alt="" /><br />Home</li>
        <li><img src="Styles/menuHome.png" width="100" alt="" /><br />Car</li>
    </ul>
</div>

我想这是最简单可靠的解决方案。

如何在css菜单中对齐图像下的文本

6 个答案: