Hola
catalineitor, estimo que solo con css no vas a poder lograr hacer lo que buscas.
podrías hacerlo con javascript pero te deberías tomar un gran trabajo. Ya que no hay modo de asignar un ancho a una etiqueta de línea como <span> por ejemplo, sin previamente convertirla a bloque con display:block; y como toda caja de bloque ocupa el 100% del ancho que encuentra en su contenedor deberías dar manualmente ese valor haciendo para ello un riguroso estudio de proporciones de acuerdo a la familia tipográfica que elijas.
Digo lo anterior basandome en este ejemplo que hice:
Código HTML:
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>centrado a la catalineitor</title>
<style type="text/css">
*{margin:0; padding:0;}
body{
font-size:13px;
font-family:Tahoma;
color:white;
}
#cotenedor{width:900px; overflow:hidden; background:red;}
.flotan {float:left; width:280px; background:gray; padding:10px;}
.parrafo {outline:1px solid blue;}
.parrafo span{outline:1px solid red; margin:0 auto;}
</style>
</head>
<body>
<div id="contenedor">
<div class="flotan">
<p class="parrafo">
<span>La línea número uno es la más larga</span><br />
<span>Línea número dos</span><br />
<span>Línea nº3</span>
</p>
</div>
<div class="flotan">
<p class="parrafo">
<span>Línea número dos</span><br />
<span>La línea número uno es la más larga</span><br />
<span>Línea nº3</span>
</p>
</div>
<div class="flotan">
<p class="parrafo">
<span>Línea nº3</span><br />
<span>Línea número dos</span><br />
<span>La línea número uno es la más larga</span>
</p>
</div>
</div>
</body>
</html> Deberías determinar cuanto mide una cadena de caracteres de longitud "x" teniendo en cuenta que una letra "a" tiene mayor ancho que una letra "i" por ejemplo.
Una vez echo esto, contar los caracteres de tus lineas y tomar la linea que mayor cantidad de caracteres tenga y reemplazar este numero por el ancho proporcional calculado previamente.
Almacenas ese dato (ancho que calculaste) en una variable y se lo pasas al ancho de .parrafo{}(padre de los <span>) y al mismo tiempo centras el bloque .parrafo{} Tu estilo quedaría así .parrafo{width: amcho_variable ; margin:0 auto;}
Un verdadero quilombo!
Espero que alguien mas experimentado que yo pueda dar con una solución más simple que la mía, ya que mi propuesta no es muy práctica que digamos jaja.
Suerte!