Ονομάζομαι Αλέξανδρος Ίτσιος και είμαι ο ιδρυτής της κοινότητας του ifeed. Eίμαι Co-founder της EnterLogic που ειδικεύεται κυρίως στο Internet Marketing. Σκοπός μου είναι να δείξω στον αρχάριο internet marketer, καθώς επίσης και τον επιχειρηματία που μόλις μπήκε στον χώρο του internet, πως να φτιάξει μια επικερδή διαδικτυακή επιχείρηση. Σε περίπτωση που θέλετε να επικοινωνήσετε μαζί μου, μπορείτε να με βρείτε στο Facebook, Twitter και Google Plus.

Πρόσφατα ήρθα αντιμέτωπος με ένα css πρόβλημα, στο οποίο έπρεπε να κεντράρω ένα μενού πλοήγησης σε wordpress. Αν και όλοι συνιστούν απλά να βάλουμε margin αριστερά ή δεξιά, ώστε να φαίνεται οπτικά ότι είναι στο κέντρο, υπάρχει το πρόβλημα ότι το μενού αν είναι δυναμικό, θα πρέπει να προσαρμόζουμε το margin αντίστοιχα.

Μία δεύτερη λύση ήταν να χρησιμοποιήσω jquery για να επιλύσω το πρόβλημα, αλλά μου φαινόταν υπερβολικό απλά για ένα μενού. Τελικά κατάφερα να επιλύσω το πρόβλημα με την παρακάτω μέθοδο.

Ας υποθέσουμε ότι ο html κώδικας μας είναι κάπως έτσι:

<div id=”topmenu”>
<ul>
<li><a href=”#”>Αρχική</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Επικοινωνία</a></li>
</ul>
</div>

Μέσα στο css αρχείο μας θα περάσουμε την ταυτότητα topmenu και μέσα σε αυτή θα περάσουμε την εντολή display: table, μαζί με ένα margin: 0 auto; Συγκεκριμένα ο κώδικας μας θα μοιάζει κάπως έτσι:

#topmenu {
display: table;
margin: 0 auto;
}

Μετά στο ul θα βάλουμε την εντολή display: table-cell, και αυτό θα κεντράρει το μενού στη μέση του container.

#topmenu ul {
display:table-cell;
list-style: none;
}

Το list-style: none; το πέρασα απλά επειδή συνηθίζεται τα οριζόντια μενού να μην έχουν bullets. Έπειτα μπορείτε να συνεχίσετε να φτιάχνετε τον κώδικα σας όπως θα τον κάνατε κανονικά. Συγκεκριμένα, μπορείτε τώρα να περάσετε και ένα float: left; και να συνεχίσετε το μενού σας από εκεί και πέρα. Όταν τελειώσετε ο κώδικας σας θα πρέπει να είναι κάπως έτσι.

#topmenu {
display: table;
margin: 0 auto;
}

#topmenu ul {
display:table-cell;
list-style: none;
}

#topmenu li {
float: left;
}

Σημείωση: Μην βάζετε keywords στο πεδίο για το όνομα καθώς επίσης και links προς άσχετες ιστοσελίδες με τη θεματολογία του άρθρου. Οι διαχειριστές του ifeed θα μαρκάρουν αυτόματα αυτά τα σχόλια ως spam!

2 Σχόλια στο Άρθρο “Πως να κεντράρουμε ένα οριζόντιο μενού πλοήγησης”

1. skapator on July 25, 2012 at 8:45 pm said:

   Πραγματικά απο ποιο χρήσιμα snippets που έχω βρεί.
2. Αλέξανδρος Ίτσιος on July 25, 2012 at 8:49 pm said:

   Δε μπορείς να φανταστείς πόσο με παίδεψε για να βρω μια τέτοια λύση 😀