Soy nuevo en esto de manejo de contenidos y llevo un buen rato con el siguiente problema
me gustaría saber como puedo hacer un salto de linea en el la misma etiqueta <a href> de html o en la hoja de estilos, me explico:Quiero hacer una galería de fotos, mi <href> contiene una foto y adelante tiene un texto, ambos me aparecen el la misma linea y quisiera que el texto apareciera abajo de mi imagen, este es mi código html:
Código HTML :
<li><a href="#" class="img1"><img src="images/1.jpg" width="180" height="135" /><i class="mitexto"><p>hola</p></i></a></li>
Y este es mi código CSS:
Código CSS :
/*Estilo de imagen*/
ul.gallery li a.img1 {
z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
}
ul.gallery li a.img1:hover{
z-index: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
background: #FFC;
box-shadow: 0px 0px 30px 0px #000;
}
/*Este es el codigo de Texto*/
.mitexto{
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
al ejecutarlo aparece algo asi:
HolaY quiero que aparesca asi:
Hola
Agradezco de antemano sus comentarios y espero me puedan orientar
Saludos!!!
