CSS: Show Text centered under List points

Question

i want to make a menu with an unorderd list.

I already changed the itempoints to an image.

What i want is that the text is centered under the itempoints.

I already made the list horizontally by using 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>

But how can i move the text under the itempoints and center it?

€:

point point point point

text text text text

the text should be centered to the point above

€2: Thanks for everyones help. I can't upvote you because of not enough reputations.

Solution:

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

what do you mean exactly? Center and under doesn't quite say much? If it's hard to explain...Can you put it in a fiddler? — Leo, Sep 26 '14 at 07:27
You have a typo: `list-syle: none`. You can't center the text because the text is going to take up 100% of the container width anyway. Use a `background-image` instead and set it's center position to 50%. Or set a fixed width on the elements — CodingIntrigue, Sep 26 '14 at 07:29
you means to say image and text should be align vertically? If yes then follow above comment posted by @RGraham — Kheema Pandey, Sep 26 '14 at 07:30

Paweł · Accepted Answer · 2014-09-26T07:45:48.040

3

http://jsfiddle.net/0c5ejr82/1/ try using background image ,example code:

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

edited Sep 26 '14 at 07:45

answered Sep 26 '14 at 07:34

Paweł

409
3
13

At First thanks for your help. That seems to work for me. The only problem here is that the images are overlapping – Ingrimmsch Sep 26 '14 at 07:47
Try to adjust it with padding-top. If they are overlapping in width, try to set width of li element. Your code would look better if you use classes instead of inline css - > http://jsfiddle.net/0c5ejr82/5/ – Paweł Sep 26 '14 at 07:56
i used width now. And it works fine thanks for your help. i clean up the code now. Im inside of an cms so its easier to use inline in the development. Or i have to change the window every time – Ingrimmsch Sep 26 '14 at 08:01
@Ingrimmsch you can further show your appreciation by marking this as an answer – Leo Sep 26 '14 at 08:20
thx for the info i marked it – Ingrimmsch Sep 26 '14 at 09:01

score 1 · Answer 2 · answered Sep 26 '14 at 07:34

You can do this using the ::before (or ::after) CSS pseudo-elements in place of the list-markers you're currently using:

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 */
}

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

Given the images you're using, though, you'll need to specify the content of each pseudo-element specifically:

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... */

score 0 · Answer 3 · answered Sep 26 '14 at 07:36

I thing this demo will help u.

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

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

score 0 · Answer 4 · answered Sep 26 '14 at 07:44

I have adopted the solution from this question and modified to yours.

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

Few tips from side AFAIK 1.Never use inline styling..as it will override any styling done on that element. 2. Use classes and always keep your code clean by putting CSS seperately.

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

If you just adjust your width of image , i think it should work. I havent checked it but i guess it should do the job.

Thanks for the tips. Normally i use a seperated CSS. But im in the context of a cms and for testing i use inline styling and seperate it after it works. I can't do it this way because the list points must be images :/ — Ingrimmsch, Sep 26 '14 at 07:53

CSS: Show Text centered under List points

4 Answers4