Texto W3.CSS
Alineación del texto
Las clases w3-left-align y w3-right-align se utilizan para alinear texto.
Texto alineado a la izquierda.
Texto alineado a la derecha.
Ejemplo
<div class="w3-container w3-border w3-large">
<div
class="w3-left-align"><p>Left aligned text.</p></div>
<div
class="w3-right-align"><p>Right aligned text.</p></div>
</div>
Elementos de centrado
La clase w3-center se usa para alinear elementos al centro:
Contenido centrado
Algún texto centrado.
Ejemplo
<div class="w3-container w3-center">
<h2>Centered Content</h2>
<img src="img_car.jpg" alt="car" style="width:80%;max-width:320px">
<p>Some centered text.</p>
</div>
Texto ancho
La clase w3-wide especifica un texto más amplio:
Este texto es normal.
Este texto es más amplio.
Ejemplo
<p class="w3-wide">The w3-wide class specifies a wider text.</p>
Opacidad del texto
La clase w3-opacity está diseñada para funcionar con todos los colores:
Opacidad del texto
Opacidad del texto
Opacidad del texto
Opacidad del texto
Ejemplo
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
Sombra de texto
La propiedad text-shadow de CSS3 se puede usar para agregar sombras o efectos de desenfoque al texto:
Sombra de texto
Sombra de texto
Sombra de texto
Sombra de texto
Ejemplo
<h2
class="w3-blue" style="text-shadow:1px 1px 0 #444">Text Shadow</h2>
Efectos especiales
Opacidad de texto + Negrita
Texto amarillo + sombra + negrita
Texto naranja + sombra + negrita
Ejemplo
<div class="w3-panel w3-pink">
<h1 class="w3-opacity">
<b>Text Opacity + Bold</b></h1>
</div>
<div class="w3-panel w3-amber">
<h1 class="w3-text-yellow"
style="text-shadow:1px 1px 0 #444">
<b>Yellow Text + Shadow + Bold</b></h1>
</div>
<div class="w3-panel w3-blue">
<h1 class="w3-text-orange"
style="text-shadow:1px 1px 0 #444">
<b>Orange Text + Shadow + Bold</b></h1>
</div>
Text Shadow no funciona en IE 9 y versiones anteriores.