[RISOLTO][GDRCD 5.4.1] - Centrare icone in menù laterale sx

[RISOLTO][GDRCD 5.4.1] - Centrare icone in menù laterale sx postato il 30/05/2017 10:44:35 nel forum programmazione, gdrcd, open source, hosting e modificato da merovingio il 06/06/2017 11:05:30

Poco tempo fa ho chiesto aiuto per la sistemazione del menù laterale a sinistra con le icone disposte su unica riga.

Seguendo le istruzioni per creare un menù ulteriore (.menu2) e le indicazioni di Leoblacksoul ci sono riuscito.

Ora pongo questa richiesta: come centrare le icone nel div?
Ho letto un po' di materiale in giro sulle varie guide css, ma non ne sono venuto a capo.

Il CSs attuale è il seguente:

div.link_menu.menu2 {
background-color:trasparent;
height:auto;
padding: 1px;
display: inline-block;
}

div.link_menu.menu2 a{
padding:2px;
text-align:center;
display: inline-block;
}

div.link_menu.menu2 a:hover{
background-color:trasparent;
color: #000;
text-decoration:none;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.link_menu.menu2 a.sprite {
display: block;
width: 50px;
height: 50px;
background: no-repeat top left;
}

div.link_menu.menu2 a.sprite:hover {
background-position: 0 100%;
}

Ho provato ad inserire text-align:center; ma non ho ottenuto l'effetto voluto.

Al momento la cosa si presenta così:

Lato Admin (tutte le icone presenti)

Lato Player (manca l'icona dell'Admin)

Vi ringrazio dell'aiuto e auguro a tutti buon proseguimento.

Il Merovingio

Enlisted ↗
Guida la tua squadra di soldati in combattimenti su larga scala, con fanteria, veicoli corazzati e aerei della IIa Guerra Mondiale!

quota

Pagine → 1 2 3 4 5

blancks

SCRIVI

30/05/2017 11:38:43 e modificato da blancks il 30/05/2017 11:39:05

Ad occhio e croce mi sembra che i tuoi tastini abbiano tutto il necessario per essere centrati, ovvero:

. display: inline-block
. dimensioni fisse

Quello che manca è dire al contenitore dei link, che suppongo essere il .menu2, di allineare i suoi contenuti al centro.

Quindi il suggerimento è di provare ad aggiungere la regola text-align:center; in div.link_menu.menu2

Metin2 ↗
Sfida i tuoi rivali a battersi con te e dimostra la tua superiorità in questo mondo fantasy!

quota

merovingio

SCRIVI

30/05/2017 11:52:50

Grazie Blancks per il tuo aiuto.
Ho fatto, ma non sortisce effetto.

Mi viene da pensare che allora il comando funzioni, ma ci sia altro che mi sposta il tutto.

Forse questa img può aiutare a capire?

Questo è il CSS completo del secondo menù (aggiornato con il text-align):

/*CSS SECONDO_MENU*/

select#gotomap{
display:block;
width:160px;
margin:0 auto 15px auto;
}

div.link_menu.menu2 {
background-color:trasparent;
height:auto;
padding: 1px;
display: inline-block;
text-align:center;
}

div.link_menu.menu2 a{
padding:2px;
text-align:center;
display: inline-block;
}

div.link_menu.menu2 a:hover{
background-color:trasparent;
color: #000;
text-decoration:none;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.link_menu.menu2 a.sprite {
display: block;
width: 50px;
height: 50px;
background: no-repeat top left;
}

div.link_menu.menu2 a.sprite:hover {
background-position: 0 100%;
}

Sembra che il DIV sia spostato, o sbaglio?

Crossout ↗
Tuffati nel mondo di Crossout, il gioco MMO d'azione post apocalittico! Costruisci le tue speciali macchine da combattimento!

quota

blancks

SCRIVI

30/05/2017 11:59:11

Di base mi aspettavo il div si allargasse fino a coprire lo spazio disponibile invece ha preso le dimensioni dei suoi contenuti.

Prova a giocare un po con la proprietà width e vedi se riesci ad estenderlo alla stessa larghezza della colonna.

Crossout ↗
Tuffati nel mondo di Crossout, il gioco MMO d'azione post apocalittico! Costruisci le tue speciali macchine da combattimento!

quota

merovingio

SCRIVI

30/05/2017 12:36:57

Dunque, inserendo width in div.link_menu.menu2 mi porta tutte le icone in verticale, anche aggiustando il valore.

Sembra più come se a questo div non si applicassero gli stessi attributi (spero di aver usato la parola corretta...) che si applicano agli altri div della colonna a sinistra:

div.pagina_info_location, div.msgs, div.menu, div.presenti, div.output {
margin: 5px auto;
padding: 5px;
width: 180px;
background-color: #000;
border: solid 1px #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

Empiricamente, nella mia ignoranza, ho provato ad inserire anche div.menu2 nell'elenco dei DIV, ovviamente senza ottenere l'effetto voluto.

Tutti gli altri DIV sono centrati nella colonna, questo invece no.
Se cambio margini e padding non mi stanno più su una riga.
Forse devo pensare a farle stare su due righe, se non risolvo.

World of Warship ↗
MMO gratuito con frenetiche battaglie navali ambientate nel ventesimo secolo. Salpa con la tua nave ed affronta i nemici!

quota

blancks

SCRIVI

30/05/2017 12:50:08 e modificato da blancks il 30/05/2017 12:53:44

merovingio ha scritto: Sembra più come se a questo div non si applicassero gli stessi attributi (spero di aver usato la parola corretta...) che si applicano agli altri div della colonna a sinistra

Perché sta seguendo le regole di div.link_menu.menu2 che sovrascrivono quelle di base tipo il padding.

In ogni caso nello screen che mi hai mostrato il div è a 182px di larghezza, ti direi di provare a settarlo più intorno ai 200.

Tieni aperto sempre lo strumento di ispezione così vedi col "bordino" rosso quando si allinea alla colonna.

A quel punto vediamo se le icone sono centrate o meno. In casi estremi, in cui vedi che nonostante l'aumento della larghezza il div non si allarga prova ad usare la regola !important, tipo:

width: 200px !important;

la quale serve a dare una certa priorità all'istruzione, ma te la consiglio solo come ultima risorsa.

CRSED: F.O.A.D. ↗
Brutale sparatutto MMO in cui vince l'ultimo giocatore che resta in vita nell'arena! Ogni giocatore sarà accompagnato da armi realistiche e magie!

quota

merovingio

SCRIVI

30/05/2017 12:59:23

In realtà io la width non l'ho dichiarata.
Quella width se l'è presa in automatico.

div.link_menu.menu2 {
background-color:trasparent;
height:auto;
padding: 1px;
display: inline-block;
text-align:center;
}

Se inserisco width, anche a 1px, le icone mi si presentano in verticale tutte spostate a sinistra.

Forse ho capito male io dove devo inserire il width?

CRSED: F.O.A.D. ↗
Brutale sparatutto MMO in cui vince l'ultimo giocatore che resta in vita nell'arena! Ogni giocatore sarà accompagnato da armi realistiche e magie!

quota

blancks

SCRIVI

30/05/2017 13:13:44

merovingio ha scritto: Forse ho capito male io dove devo inserire il width?

Pardon, sono stato criptico io.
Quando ti dicevo di giocare con la proprietà width ti chiedevo di inserirla in div.link_menu.menu2 e di provare ad allargare forzatamente il div, perché il suo contenuto dovrebbe già essere allineato ma se il div non ha almeno la larghezza della colonna di sinistra non riusciremo mai a notarlo.

Pandora Upside Down High School ↗
La prima scuola per sovrannaturali al mondo vi attende! Scoprite il vostro cammino Ancestrale relazionandovi con i compagni e le attività dei club

quota

merovingio

SCRIVI

30/05/2017 13:32:33

Figurati Blancks!
Grazie per l'aiuto, invece...

Allora, ecco il codice con il width settato a larghezza colonna:

div.link_menu.menu2 {
background-color:trasparent;
height:auto;
padding: 1px;
display: inline-block;
text-align:center;
width: 210px;
}

E questo è l'effetto ottenuto:

Mi sento un po' imbranato, a dire il vero.
Perchè mi sembra che la soluzione sia lì dietro l'angolo e sono troppo babbano per vederla.

War Thunder ↗
Aviazione, veicoli corazzati e flotte militari della seconda guerra mondiale. Parteciperai a tutte le principali battaglie!

quota

blancks

SCRIVI

30/05/2017 13:50:14 e modificato da blancks il 30/05/2017 13:50:46

Una possibile causa potrebbe essere il display: block; che hai in div.link_menu.menu2 a.sprite e ti suggerirei di provare a rimuoverlo.

Se non funziona, postami l'ispezione di uno dei tastini così andiamo meno alla cieca.