[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 e open source 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

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

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

Entropia Universe ↗
Lascia che il tuo avatar esplori nuovi mondi e viaggi tra i pianeti in questo stupendo MmoRpg Sci-Fi Free to Play!

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?

Naruto x Boruto GDR ↗
Gioca al miglior GDR play by chat di Naruto x Boruto. Iscriviti ora!

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.

Fervm ↗
È il tempo di vestire la toga virile, scalare le tappe che il mos maiorum ti impone! Stringi alleanze, ottieni consensi e il tuo nome sarà ricordato!

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.

Raja Dunia ↗
Scegli il tuo Percorso e avventurati su Raja Dunia: Antiche Divinità e Gloriosi Eroi sono già scolpiti nella storia. La tua Leggenda si unirà a loro?

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.

Piume Nere ↗
Moralità, Intrigo, Seduzione, Soprannaturale ed Inquisizione. Quali torbidi segreti nasconde Laddington? Immergiti nelle nebbie di un mondo senza tempo!

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?

Due Città ↗
Le Due Città - Gioco di Ruolo Fantasy Storico. Scrivi la tua storia e lasciati trasportare dalla fantasia!

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.

Dungeons & Dragons ↗
Neverwinter è il più grande mondo online su Dungeons & Dragons! Scegli il tuo eroe e combatti in un modo selvaggio!

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.

NosTale ↗
Con l’aiuto della spada e della bacchetta magica risolverai abilmente intricate missioni e domerai coraggiosamente mostri selvaggi!

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.