HTML/CSS: how to put all
  • in
      on the same line and centered [duplicate]

  • Tags: html,css,html-lists

    Problem :

    This question already has an answer here:

    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



    Solution :

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


      CSS Howto..

      How to wait for resources to be loaded

      CSS: How to get thumbnails into a horizontal line?

      How to append text after last css class

      How to change font on css?

      CSS Flex Box — flex-wrap:wrap; How to style a specific line?

      Problems with jQuery Image Slideshow / Rotating Banner using timeout / interval

      How do you get this result, using Jquery Scroll Event & offset/position, css or javascript?

      Are there limits to how tall/wide CSS Sprite-maps can be?

      How to reset tag in CSS

      HTML5 / CSS| How do I disable responsivity when a scroll bar appears?

      How to make section element in css to full width

      How do I make template colors update when I choose them from a list or radio buttons? [closed]

      How do I avoid using !important?

      How does Mozilla create this animated effect?

      How to change css rules of external stylesheet [duplicate]

      How to make entire div change color on hover using css?

      How to create DRY CSS when using transform & keyframes

      How to link an image in input text box using css

      how can I reload a “CSS background-image” each time I hover on it?

      How do I set a cell background colour based on its contents using PHP after reading values from MySQL?

      How do three.js transforms and CSS3 3D-transforms correspond?

      How to use css to crop images from left and right without knowing dimensions

      How to properly make my own list-style?

      How to spin css cube each after each [closed]

      Responsive Design - Toggle a Div's Visibility - how to integrate javascript with css @media

      How to insert css code in php?

      How can I create this button in CSS3?

      How to make right-side triangle in CSS ribbon menu?

      How can I format all td elements contained in a table with class myclass in CSS?

      How to find the css file name associated with an element?