如何在css菜单中的图像下对齐文本 [英] how to align text under image in css menu

问题描述

我想在图片底部对齐菜单文字，如何实现？

预期输出： b
$ b

 图像图像图像
 [menutext] [menutext] [menutext] [menutext] 
  
 
 
 
 实际产出：
 图像[menutext]图像[menutext]图像[menutext]图像[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代码 b 
 $ b 
 < div id =vilaniHeader> 
< h1> 
公司名称
< / h1> 
< div id =menu> 
< ul> 
< li class =menuHome>< img src =Styles / menuHome.png/>首页< / 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> 
  
我想菜单文本应该在图像底部对齐帮助我做。 / p> 
 
解决方案
我想出了这个解决方案基于tejash的答案。我的回答验证和搜索引擎友好。 
 
 
 
 
 
我最喜欢使用div中的链接，但我想这将使用ul 
 
 
我使用的背景图片不显示CSS是否已停用
 
 
我使用显示为区块的span组合，因为标记内的div无效。
 
  
 
更改宽度和高度以满足您的需要
 
 
 
 
 
 HTML 
 < div id =nav> 
< a href =＃>< span class =image>< / span>< span>关于我们< / span> 
< a href =＃>< span class =image>< / span>< span>投资者< / span>< / a> 
< / div> 
  
 CSS 
  #nav a {
 display：block; 
 float：left; 
 width：100px; 
} 
 .image {
 display：block; 
 background：url（myimage.jpg）no-repeat滚动中心中心透明; 
 height：40px; 
 width：100px; 
} 
  
 
I want to align menu text at the bottom of image how to i achieve it?

Expected output:
Image    Image    Image    Image
[menutext]    [menutext][menutext]    [menutext]
Actual output :
Image[menutext]      Image[menutext]      Image[menutext]      Image[menutext]  
my Css Code:
#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;
}
and My HTML code 
<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>
I want menu text should be align at the bottom of the image plese help me to do that.
解决方案
I came up with this solution building upon the answer here from tejash. My answer validates and is search engine friendly.  


I prefered to use links within a div but I imagine this will work with an ul
I use a background image that does not show if CSS is disabled  
I use a span set displayed as block because a div inside an a tag does not validate
I use a class to place the image but use ids if you want different pics for each link
Change the width + heights to suit your needs


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


                        
这篇关于如何在css菜单中的图像下对齐文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！