Html 如何在css菜单中对齐图像下的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6242079/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to align text under image in css menu
提问by pramod
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:
我的 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;
}
and My HTML code
和我的 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>
I want menu text should be align at the bottom of the image plese help me to do that.
我希望菜单文本应该在图像的底部对齐，请帮助我做到这一点。
回答by Phil
I came up with this solution building upon the answer here from tejash. My answer validates and is search engine friendly.
我根据 tejash 的答案提出了这个解决方案。我的回答经过验证并且对搜索引擎友好。
- 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
- 我更喜欢在 div 中使用链接，但我想这将适用于 ul
- 如果禁用 CSS，我使用的背景图像不显示
- 我使用显示为块的跨度集，因为 a 标签内的 div 未验证
- 我使用一个类来放置图像，但如果您想要每个链接的不同图片，请使用 id
- 更改宽度 + 高度以满足您的需求
HTML
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
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;
}
回答by Kissaki
Make the imga block element so it takes the full width / line-breaks afterwards.
制作img一个块元素，以便之后使用全宽/换行符。
#menu li { display:block; }
That's all.
就这样。
回答by Tuco
You can do this way, obviously replacing the image sample I used. For the link to work, you can use a jQuery click event on LI, so it searches for the link inside the clicked LIand then opens the desired link.
你可以这样做，显然替换了我使用的图像样本。为了使链接起作用，您可以在 上使用 jQuery click 事件LI，因此它会在 clicked 中搜索链接LI，然后打开所需的链接。
HTML
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
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
}
回答by tejash
I would suggest add some wrapper on text and make image and wrapper both display:block; You can use span tag as an wrapper for text.
我建议在文本上添加一些包装器并使图像和包装器都显示：块；您可以使用 span 标签作为文本的包装器。
HTML
HTML
<ul>
<li><a><img src="Styles/menuHome.png" /><span>Home</span></a></li>
</ul>
CSS
CSS
li img, li span { display:block; }
li img, li span { display:block; }
回答by opatut
If you want your text to overlay your image, but at the bottom, you should try to play around with the line-heightproperty. That will cause your text to move down, so it will be in the center of it's line.
如果您希望您的文本覆盖您的图像，但在底部，您应该尝试使用该line-height属性。这将导致您的文本向下移动，因此它将位于其行的中心。
回答by Midas
I have two solutions for you. style1works for items with text smaller than the image. style2works for items with text wider than the image. Easiest is to make sure that the images are always wider or smaller than the text, so that you need only one style.
我有两个解决方案给你。style1适用于文本小于图像的项目。style2适用于文本比图像宽的项目。最简单的方法是确保图像始终比文本更宽或更小，这样您只需要一种样式。
CSS:
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:
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>
I'm not a span-fan but it seems like you can't do it without here.
我不是span粉丝，但似乎没有这里你就做不到。
BTW, why don't you just add a br?
顺便说一句，你为什么不加一个br？
CSS:
CSS：
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
HTML:
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>
I guess that's the most easy and reliable solution.
我想这是最简单可靠的解决方案。
