Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it L'avatar di Scream
    Registrato dal
    Apr 2002
    Messaggi
    228

    Lista inline, ma centrata verticalmente

    Qualcuno sa come realizzare una lista centrata verticalmente in un div?

    In pratica ho questo css

    codice:
    #header {
    	position: relative;
    	height: 81px;
    	background: url('../images/testata.png') no-repeat;
    	width: 100%;
    	margin: 10px auto 20px auto;
            vertical-align:middle;
    }
    
    #header ul {
        display: inline;
        vertical-align: middle;
    }
    
    #header ul li {
        padding-right: 40px;
        list-style: none;
        display: inline;
    }
    Nella pagina ho questo:
    codice:
    <div id="header" >
    <ul>[*][img]images/logo.png[/img][*]Link1[*]Link2[*]Link3[/list]
    </div>
    Il file logo.pnd è alto 50px e vorrei che i vari link fossero allineati centralmente in altezza, mentre ora sono allineati in basso.

    Grazie

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Definire inline degli oggetti di tipo blocco non e` una bella soluzione: puo` avere effetti collaterali.

    Il vertical-align puo` essere usato solo in contesto di tabelle, per cui nel tuo caso non ha effetto (salvo in qualche browser).

    Prova a vedere se questa formattazione assomiglia a quello che vuoi ottenere:
    codice:
    #header {
      height: 81px;
      background: url(../images/testata.png) no-repeat;
      width: 100%;    /* e` necessario che il contenitore abbia larghezza definita */
      margin: 10px 0 20px 0;
    }
    
    #header ul {
      margin: auto;
      line-height: 100%;
      background: red;   /* solo per le prove */
    }
    
    #header ul li {
      padding-right: 40px;   /* questo rischia di sballare la centratura orizzontale */
      list-style: none;
      float: left;
      line-height: 100%;
      background: white;   /* solo per le prove */
    }
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.