Tema: DIV dentro de div
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/10/2015, 08:40
diegoguerrero
 
Fecha de Ingreso: diciembre-2014
Ubicación: Madrid
Mensajes: 274
Antigüedad: 9 años, 4 meses
Puntos: 5
DIV dentro de div
Hola.

Tengo la siguiente situación y me gustaría saber cómo mantener la imagen y el texto a la misma altura pero en div separados (me daría igual que acabasen en el mismo DIV) Gracias (la imagen es solo de la parte 'left', es decir, 'left' contiene 'img' y 'text'). Además, yo trabajo con porcentajes y padding con px porque me gustaría que el diseño fuera responsive. Muchas gracias, de verdad.



Código CSS: 
Ver original
  1. @charset "UTF-8";
  2. /* ESTILO 1: BANNER */
  3.     .banner-head{
  4.         font: 17px "OpenSans-Regular";
  5.         color: white;
  6.         height: 32px;
  7.         padding-left: 15px;
  8.         padding-right: 15px;
  9.     }
  10. /* ESTILOS 2 Y 3: LEFT Y RIGHT DENTRO DEL BANNER */
  11.     .banner-head .left{
  12.         float: left;
  13.         text-align:left;
  14.         border: 1px solid lightgreen;
  15.     }
  16.     .banner-head .right{
  17.         float: right;
  18.         text-align:right;
  19.     }
  20.     .banner-head .left,.right{
  21.         display: inline-table;
  22.         width: 49.8%;
  23.         padding-top: 3.5px;
  24.         padding-bottom: 3.5px;
  25.     }
  26. /* ESTILOS 4 Y 5: IMG Y TEXT */
  27.     .banner-head .left .img{
  28.         width: 22px;
  29.         display: inline-table;
  30.             border: 1px solid lightblue;
  31.     }
  32.     .banner-head .left .text{
  33.         border: 1px solid lightblue;
  34.         display: inline-table;
  35.     }
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.     <link rel="stylesheet" href="../styles/styles.css"/>
  4.     <title>Plataforma escolar 2.0</title>
  5. </head>
  6. <body>
  7.     <div class="banner-head bgcolor-educamos-circulares">
  8.         <div class="left">
  9.             <div class="img"><img src="logo.png" height="22" width="22"></div>
  10.             <div class="text">
  11.                 <font>Plataforma escolar 2.0</font>
  12.             </div>
  13.         </div>
  14.         <div class="right">
  15.             <!--<div class="img"><img src="logo.png" height="22" width="22"></div>-->
  16.             <div class="text">Diego Guerrero</div>
  17.         </div>
  18.     </div>
  19. </body>
  20. </html>