como ajustar texto verticalmente?

[snorkel]

Una pregunta mas acerca de la web q estoy intentando hacer.


como justifico el texto verticalmente?
me refiero al menu.

quiero q el texto de los dos ultimos botones sea ajustado verticalmente como en el dibujo de abajo. no se si mi metodo esta bueno o no.

es q aprender mirando no vale nada, por eso prefiero hacerlo yo a mi manera y despues preguntarlo, y si hay una manera mejor, pues la aplico..

otra cosa es q no se si crear 5 div dentro de la div de menu fue buena idea.
tampoco se q si hay posibilidad de hacer cada una de 5 celdas autoajustable.
aqui yo le di a cada una de las celdas (mejor dicho DIVs) un tamaño fijo.

quiza mejor seria crear 5 botones y no 5 div?
y colocarlos dentro de la div de menu?
me refiero a los botones con titulo ya escrito encima etc.. y ponerles links

<div style="background-image: url(img/menu-red-bar.jpg); background-repeat: no ;width:552px; height: 90px; float:left;">
<div class="Menu-Bar-Style" style="background:#DB3801; width:98px; height:35px; float:left; margin-top: 27px;">QUIENES <br> SOMOS</div>
<div class="Menu-Bar-Style" style="background:#DB3801; width:100px; height:35px; float:left; margin-top: 27px;">COMPRA <br> VENTA</div>
<div class="Menu-Bar-Style" style="background:#DB3801; width:104px; height:35px; float:left; margin-top: 27px;">SERVICIO <br> TECNICO</div>
<div class="Menu-Bar-Style" style="background:#DB3801; width:114px; height:35px; float:left; margin-top: 27px;">RECICLADO</div>
<div class="Menu-Bar-Style" style="background:#DB3801; width:136px; height:35px; float:left; margin-top: 27px;">COMPONENTES</div>
</div>

********************

<style type="text/css">
*{margin:0px; padding:0px;}

body {
background-color: #252525;
}
.Menu-Bar-Style {
font-size: 13px;
color: #FFFFFF;
font-family: "Tahoma";
text-shadow: 1px 1px #000000;
}
</style>

[pzin]

Para un menú, lo que se suele usar para centrar verticalmente texto es usar un pequeño truco, que es darle una altura de linea al texto igual a la altura del elemento del menú:

Código CSS:

#menu {
  height: 30px;
}
 
#menu a {
  line-height: 30px;
}
 

Luego, para ser semánticamente correcto, deberías de usar una lista desordenada para el menú. Incluso si usas HTML5 usar la etiqueta nav:

Código HTML:

<nav role="navigation">
  <ul>
    <li><a href="/enlace">Inicio</a></li>
    <li><a href="/enlace">Final</a></li>
  </ul>
</nav>
 

Para ese menú en concreto, no necesitas usar ninguna imagen. Puedes usar algún pseudo-elemento para recrear las lineas divisorias y para el borde inferior, aplicarle un borde al elemento nav.

[snorkel]

Graias, Bonez, voy a probarlo

[snorkel]

Perdon, no logro entenderlo, podrias hacer un ejemplo mas concreto, con mi codigo?
Con CSS y con HTML5.

Código:

<div style="background-image: url(img/menu-red-bar.jpg); background-repeat: no; width:552px; height: 90px; float:left;">
	<div class="Menu-Bar-Style" style="background:#DB3801; width:98px; height:35px; float:left; margin-top: 27px;">QUIENES <br> SOMOS</div>
	<div class="Menu-Bar-Style" style="background:#DB3801; width:100px; height:35px; float:left; margin-top: 27px;">COMPRA <br> VENTA</div>
	<div class="Menu-Bar-Style" style="background:#DB3801; width:104px; height:35px; float:left; margin-top: 27px;">SERVICIO <br> TECNICO</div>
	<div class="Menu-Bar-Style" style="background:#DB3801; width:114px; height:35px; float:left; margin-top: 27px;">RECICLADO</div>
	<div class="Menu-Bar-Style" style="background:#DB3801; width:136px; height:35px; float:left; margin-top: 27px;">COMPONENTES</div>
</div>

Tampoco entendi lo de "usar algún pseudo-elemento para recrear las lineas divisorias"

Podrias dar un ejemplo con mi diseño?

GRACIAS

[snorkel]

......................

[luculawa]

Si necesitas alinear verticalmente prueba con
display:table en el div contenedor y con display:table-cell en el div contenido.

asi los divs se comportaran como tablas y podras alinear todo verticalmente.

prueba con eso, si necesitas mas ayuda aqui estamos ejej

[snorkel]

luculawa, voy a probar, a ver si logro hacerlo..

tb me gustaria probar la version de Bonez, pero de momento o logro entender ninguna de las 2 versiones ofrecidas :(

si hasta mañana no logro hacerlo, tendre q volverles a preguntarles por los ejemplos reales

[C2am]

Tal vez esto te ayude a comprender el tema:
http://ksesocss.blogspot.com/2012/05...6-maneras.html

Saludos