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,