Question

我想制作一个包含无序列表的菜单。

我已经将itempoints更改为图像。

我想要的是文本在itempoints下居中。

我已经使用float：left。

水平制作了列表

<ul style="list-syle: none;">   
    <li style="list-style-image: url(layout/img/content/pb_beruf.png); float:left; text-align:center;">Beruf</li>
    <li style="list-style-image: url(layout/img/content/pb_sprache.png); float:left; text-align:center;">Sprache</li>
    <li style="list-style-image: url(layout/img/content/pb_gesundheit.png); float:left; text-align:center;">Gesundheit</li>
    <li style="list-style-image: url(layout/img/content/pb_kultur.png); float:left; text-align:center;">Kultur</li>
    <li style="list-style-image: url(layout/img/content/pb_gesellschaft.png); float:left; text-align:center;">Gesellschaft</li>
    <li style="list-style-image: url(layout/img/content/pb_grundbildung.png); float:left; text-align:center;">Grundbildung</li> 
</ul>

但是如何在itempoints下移动文本并使其居中呢？

€：

点对点

文字文字文字

文本应该以上面的点为中心

€2：感谢大家的帮助。由于声誉不足，我无法支持你。

解决方案：

<ul style="list-syle: none;">   
            <li style="list-style:none; background: url(layout/img/content/pb_beruf.png) center top no-repeat; float:left; text-align:center; padding-top:70px;  width: 100px;">Beruf</li>
            <li style="list-style:none; background: url(layout/img/content/pb_sprache.png) center top no-repeat; float:left; text-align:center; padding-top:70px;  width: 100px;">Sprache</li>
            <li style="list-style:none; background: url(layout/img/content/pb_gesundheit.png) center top no-repeat; float:left; text-align:center; padding-top:70px; width: 100px;">Gesundheit</li>
            <li style="list-style:none; background: url(layout/img/content/pb_kultur.png) center top no-repeat; float:left; text-align:center; padding-top:70px; width: 100px;">Kultur</li>
            <li style="list-style:none; background: url(layout/img/content/pb_gesellschaft.png) center top no-repeat; float:left; text-align:center; padding-top:70px; width: 100px;">Gesellschaft</li>
            <li style="list-style:none; background: url(layout/img/content/pb_grundbildung.png) center top no-repeat; float:left; text-align:center; padding-top:70px; width: 100px;">Grundbildung</li>
</ul>

Answer 1

http://jsfiddle.net/0c5ejr82/1/ 尝试使用背景图片，示例代码：

li{list-style:none; 
background: url(http://www.w3schools.com/images/compatible_ie.gif) center top no-repeat; 
float:left; 
text-align:center; 
padding-top:20px;}

Answer 2

您可以使用::before（或::after）CSS伪元素代替您当前正在使用的列表标记来执行此操作：

＆＃13;

li {
  display: inline-block; /* or 'float: left' if you prefer */
  position: relative; /* to allow the pseudo-elements to be placed in
                         relation to this element */
  text-align: center;
  padding-top: 17px; /* to provide 'room' for the pseudo-elements */
  border: 1px solid #000;
}

li::before {
  content: url("http://placehold.it/30x30"); /* the image to show */
  position: absolute; 
  top: 0;
  left: 50%;
  margin: -15px 0 0 -15px; /* centring the images against the top border */
  border-radius: 50%; /* aesthetic, adjust, or remove, to taste */
  overflow: hidden; /* again: aesthetic, adjust, or remove, to taste */
}

＆＃13;

<ul style="list-syle: none;">
  <li>Beruf</li>
  <li>Sprache</li>
  <li>Gesundheit</li>
  <li>Kultur</li>
  <li>Gesellschaft</li>
  <li>Grundbildung</li>
</ul>

＆＃13;

考虑到您正在使用的图像，您需要具体指定每个伪元素的内容：

li:nth-child(1)::before {
    content: url(layout/img/content/pb_beruf.png);
}
li:nth-child(2)::before {
    content: url(layout/img/content/pb_sprache.png)
}
/* ...etc... */

Answer 3

我认为这个演示会对你有帮助。

<div id="menu-outer">
<div class="table">
<ul id="horizontal-list">
  <li><a href="#"><img src="images/list-item-1.gif" alt="list item 1" /></a></li>
  <li><a href="#"><img src="images/list-item-2.gif" alt="list item 2" /></a></li>
  <li><a href="#"><img src="images/list-item-3.gif" alt="list item 3" /></a></li>
  <li><a href="#"><img src="images/list-item-4.gif" alt="list item 4" /></a></li>
</ul>
</div>
</div>

css：

#menu-outer {
height: 84px;
background: url(images/bar-bg.jpg) repeat-x;
}

.table {
display: table;   /* Allow the centering to work */
margin: 0 auto;
}

ul#horizontal-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul#horizontal-list li {
    display: inline;
}

Answer 4

我已采用此问题的解决方案并修改为您的。

http://stackoverflow.com/questions/1225130/how-can-i-align-text-directly-beneath-an-image

AFAIK方面的一些提示 1.永远不要使用内联样式..它将覆盖在该元素上完成的任何样式。 2.使用类并始终通过单独放置CSS来保持代码清洁。

<ul>
<li>
 <div class="class1">
    <img src="layout/img/content/pb_beruf.png" />
    <p>Beruf</p>
 </div>
 </li>
<li>    
<div class="class1">
    <img src="layout/img/content/pb_sprache.png" />
    <p>Sprache</p>
</div>
 </li>  

   .... 

</ul>

<强> CSS：

li {
  float:left;
}

.class1 {
    text-align: justify;
    width:100px;
}

.class1 img {
    display: block;
    margin: 0 auto;
}

如果你只是调整你的图像宽度，我认为它应该工作。我没有检查过它，但我想它应该可以完成这项工作。

CSS：以列表点为中心显示文本

4 个答案: