0

In my wordpress site I have the following code in a page a the top of the site which is used as main menu:

<ul class="gk-short-menu">
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#locali">
        <img id="loc" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/locali.png" height="64" width="64"/> 
        <span id="loc-span">Locali</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#laboratorio">
        <img id="lab" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/muffin.png" height="64" width="64"/> 
        <span id="lab-span">Laboratorio</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#servizi">
        <img id="serv" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/cutlery.png" height="64" width="64"/> 
        <span id="serv-span">Servizi</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#diconodinoi">
        <img id="about" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/aboutus.png" height="64" width="64"/> 
        <span id="about-span">Dicono di noi</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#photogallery">
        <img id="pic" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/gallery.png" height="64" width="64"/> 
        <span id="pic-span">Photo Gallery</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#contatti">
        <img id="loc" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/location.png" height="64" width="64"/> 
        <span id="loc-span">Contatti</span>
    </a>
</li>

which produce the following result: enter image description here

As you can image I would like to have all the icons in the same line and centered. Which CSS rules do I need? Thank you

SagittariusA
  • 5,289
  • 15
  • 73
  • 127

4 Answers4

2

This should do the trick

<style>
  ul li{display: inline;}
  ul {text-align: center;}
</style>
myk_raniu
  • 150
  • 1
  • 1
  • 7
1

You could try adding display:inline-block; to the li element.

Or float:left; will work also.

Steveo
  • 557
  • 4
  • 15
1

You can add following css rule.

 .gk-short-menu {text-align: center;}
 .gk-short-menu li {
  display: inline-block;
  margin-right: 5px;
 }
.gk-short-menu span {
 display: block; 
 text-align: center;
 }

That rule will make your content centered and in same single line ...

laraib
  • 611
  • 5
  • 16
  • thank you mate but I am afraid it does not work...maybe there's something contrasting with the theme – SagittariusA Apr 29 '16 at 15:48
  • that's may be we are not targeting our element properly. You should target your element properly so that it can take styles and once it takes styles it will be shown nicely as you want. – laraib Apr 29 '16 at 16:31
  • here is same code with in jsfiddle and its working fine [link]https://jsfiddle.net/tegs8L55/ so now only issue is with your element targeting. Target your elements properly and it will work fine for you. – laraib Apr 29 '16 at 16:34
  • I have updated code in my solution, and its working fine by now, you can use that code and also check results in JSFIDDLE – laraib Apr 29 '16 at 16:39
1

you can try doing it with flexbox

li a{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items: center;
  margin: auto;
}
ul{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 0px;
}
<ul class="gk-short-menu">
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#locali">
        <img id="loc" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/locali.png" height="64" width="64"/> 
        <span id="loc-span">Locali</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#laboratorio">
        <img id="lab" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/muffin.png" height="64" width="64"/> 
        <span id="lab-span">Laboratorio</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#servizi">
        <img id="serv" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/cutlery.png" height="64" width="64"/> 
        <span id="serv-span">Servizi</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#diconodinoi">
        <img id="about" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/aboutus.png" height="64" width="64"/> 
        <span id="about-span">Dicono di noi</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#photogallery">
        <img id="pic" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/gallery.png" height="64" width="64"/> 
        <span id="pic-span">Photo Gallery</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#contatti">
        <img id="loc" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/location.png" height="64" width="64"/> 
        <span id="loc-span">Contatti</span>
    </a>
</li>
CodeWeis
  • 846
  • 6
  • 19