Centrare verticalmente una lista in un div

**davidl77** · 15-12-2008, 12:58

Ciao!

Il quesito è semplice, però mi ci sto arrovellando. Ho provato a guardare in giro ma non riesco a capire come fare.
Il problema è semplice: vorrei centrare l'unica lista che ho verticalmente nel div 'right'. Come posso fare?

Grazie mille!

Qui sotto il codice:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>TEST</title>
    <style type="text/css">
      
html,body {
	height: 100%;
	width: 100%;
  margin-bottom:0px;
  margin-left:0px;
  margin-right:0px;
  margin-top:0px;
  padding:0px;
	text-align:center;
	background-color: #000;
	}
	p {
	
  margin-bottom:0px;
  margin-left:0px;
  margin-right:0px;
  margin-top:0px;
  padding:0px 0px 0px 0px;
  border: 0px 0px 0px 0px;
	text-align:center;
	color: #000;
	}
#container {
	position: absolute;
        top: 50%;
  left:50%;
  width:690px; /*deve essere pari e multiplo di 3*/
  height:340px;
	margin: -170px 0px 0px -345px;
	text-align:left;
	padding:0px 0px 0px 0px;
	border:1px dashed #fff;
	background-color:#000;
	background-position: center center;
	}
#left
{
	position: relative;
  width:230px;
  height:340px;
	margin: 0px 0px 0px 0px;
	text-align:left;
	padding:0px 0px 0px 0px;
	border:0px dashed #fff;
	background-color:#fff;
	z-index:0;
	}
#center
{
	position: relative;
  width:230px;
  height:340px;
	margin: 0px 0px 0px 230px;
	text-align:left;
	padding:0px 0px 0px 0px;
	border:0px dashed #fff;
	background-color:#ccc;
	}
#right
{
	position: relative;
  width:230px;
  height:340px;
	margin: -20px 0px 0px 230px;
	text-align:left;
	padding:0px 0px 0px 0px;
	border:0px dashed #fff;
	background-color:#eee;
	}

img#background { height: 100%; 
width: 100%; z-index: -1; position:absolute; color: white; }

#right ul {
		list-style: none;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		border: 0px 0px 0px 0px;
		vertical-align: middle;
		}
		
#right li {
		border-bottom: 1px solid #90bade;
		margin: 0;
				vertical-align: middle;
		}
#right li a {
		display: block;
		padding: 5px 5px 5px 0.5em;
		border-left: 10px solid #1958b7;
		border-right: 10px solid #508fc4;
		background-color: #2175bc;
		color: #fff;
		text-decoration: none;
		width: 100%;
		}

	html>body #right li a {
		width: auto;
		}

	#right li a:hover {
		border-left: 10px solid #1c64d1;
		border-right: 10px solid #5ba3e0;
		background-color: #2586d7;
		color: #fff;
		}
    </style> 
    <style type="text/css">
      <!--
      .style1 {color: #0000FF}
      .style2 {color: #0066FF}
      .style3 {color: #CC0000}
      -->
    </style>
  </head>
  <body>
    <div id = "container">

      <div id = "left">
        [img]foto.jpg[/img]
        <div id = "center">
          

Indice siti 
          </p>
          <div id = "right">  
            <ul>	[*]
              SSP	[*]

              1	[*]
              2	[*]
              3	[*]
              4	[/list]
          </div>
  </body>
</html>

su: http://www.w3schools.com/css/tryit.a...vertical-align potete provarlo 'online'.

Grazie mille,

**lila89** · 15-12-2008, 15:36

hai provato a mettere text-align:center nel div right al posto del left?!?!?!

tuo codice:

codice:

#right
{
	position: relative;
  width:230px;
  height:340px;
	margin: -20px 0px 0px 230px;
	text-align:left;
	padding:0px 0px 0px 0px;
	border:0px dashed #fff;
	background-color:#eee;
	}

**Mich_** · 15-12-2008, 16:05

@Lila
non so cosa c'entri la tua risposta con il suo problema: e` errata per due motivi: 1. il tuo sistema funziona solo con elementi di tipo inline, mentre i[*] sono di tipo blocco; 2. lui vuole centrare VERTICALMENTE, mentre il text-align serve per centrare il testo in orizzontale.

@davidl
L'esempio postato nel link non e` pertinente: quello si riferisce all'ALLINEAMENTO (non centramento) di UN SOLO elemento di tipo INLINE, mentre (se ho capito giusto) tu vuoi centrare un oggetto di tipo blocco (contenente a sua volta vari elementi di tipo blocco). In pratica devi centrare l'elemento <ul> all'interno del <div>.
Per centrare in verticale occorre usare i posizionamenti: non e` una tecnica semplice (molti corsi di CSS li trattano in modo superficiale).
Comunque trovi un link importante nei "link utili".

**davidl77** · 15-12-2008, 17:45

Ti ringrazio.

Innanzitutto scusa, il link postato serviva solo per il tool dove, copiando ed incollando il codice, ognuno può provare il codice postato.

E' molto utilie, potresti segnalarlo nelle guide del post!!!

Comunque sì, il mio scopo è centrare VERTICALMENTE l'elemento <ul> all'interno di un <div>.

Ho letto i link utili, però non mi hanno aiutato.

Come infatti posso centrarlo se l'height del blocco <ul> non è nota?

Grazie mille,
David.

**Mich_** · 15-12-2008, 18:08

Come infatti posso centrarlo se l'height del blocco <ul> non è nota?

Ooopps, non ci avevo pensato.

La cosa diventa un tantino complessa ...
Credo che sia necessario utilizzare JS, che legga l'altezza del blocco e sistemi il margin-top di conseguenza (mentre il top dovra` essere 50%)

**lila89** · 15-12-2008, 18:38

ops.. scusate.. ho letto male io..

Discussione: Centrare verticalmente una lista in un div

Strumenti discussione

Ricerca discussione

Visualizza

Centrare verticalmente una lista in un div

Permessi di invio