Hola compañeros Tengo un texto al lado de una imagen que es un formulario (botón de compra) como hago para que el texto me quede al lado izquierdo de la imagen en el centro como esta
He usado inline entre otras pero no me sale.
A continuación adjunto código:
/*CONTENIDO DEL CUERPO DONDE VA IMAGENES Y PRODUCTOS*/
.cajapadre {
text-align: center;
/* Una caja al lado de la otra importante padre*/
margin-bottom: 0px;
}
.caja4hijo {
background-color: #F8F8F8;
padding: 0px;
margin: 0px;
width: 225px;
display: inline-block;
/* inline-block una caja al lado d ela otra importante hoja */
/*float: left;*/
/*para quedar a la misma altura, puedo usar blick y float left y darle altura al la caja titulo caja imagen y cajaboton */
}
.caja3hijo {
background-color: yellow;
padding: 0px;
margin: 0px;
width: 302px;
display: inline-block;
/* una caja al lado d ela otra importante hoja */
}
.caja2hijo {
background-color: yellow;
padding: 0px;
margin: 0px;
width: 450px;
display: inline-block;
/* una caja al lado d ela otra importante hoja */
}
/*.espacio-art {
padding-bottom: 15px;
}*/
.titulo-art {
font-family: 'Sansita', sans-serif;
font-size: 1.2em;
color: #C42427;
background: #9AB01E;
width: 100%;
height: 80px;
}
.imagen-art {
height: 280px;
}
.imagen-ofer {
height: 320px;
}
.separador {
text-align: center;
margin: 10px 0;
padding: 5px 0;
}
<article>
<div class="cajapadre">
<!--------contiene 4 cajas--------->
<div class="caja4hijo">
<div class="titulo-art espacio-art">3M™ Littmann® Lightweight</div>
<div class="imagen-art espacio-art">
<a class="picfancy" href="img/art-varios/olivas.jpg" title="3M™ Littmann® Lightweight "><img src="img/art-varios/olivas.jpg" width="133" alt="" /></a>
</div>
<div class="boton-art espacio-art">
<!-----icono de comprar---->
<div>
Gris
<form id="frm_botonePayco" name="frm_botonePayco" method="post" action="https://secure.payco.co/checkout.php">
<img src="img/boton/comprar.jpg" width="126" alt="" />
</form>
</div>
<div>
Negro
<form id="frm_botonePayco" name="frm_botonePayco" method="post" action="https://secure.payco.co/checkout.php">
<img src="img/boton/comprar.jpg" width="126" alt="" />
</form>
</div>
<!-----icono de comprar---->
</div>
</div>
<div class="caja4hijo">
<div class="titulo-art espacio-art">3M™ Littmann® Select</div>
<div class="imagen-art espacio-art">
<a class="picfancy" href="img/art-varios/caucho-post-classic.jpg" title="3M™ Littmann® Select"><img src="img/art-varios/caucho-post-classic.jpg" width="133" alt="" /></a>
</div>
<div class="boton-art espacio-art">
<!-----icono de comprar---->
<!-----icono de comprar---->
</div>
</div>
<div class="caja4hijo">
<div class="titulo-art espacio-art">3M™ Littmann® Pediatrico</div>
<div class="imagen-art espacio-art">
<a class="picfancy" href="img/art-varios/kit-liviano.jpg" title="3M™ Littmann® Pediatrico"><img src="img/art-varios/kit-liviano.jpg" width="133" alt="" /></a>
</div>
<div class="boton-art espacio-art">
<!-----icono de comprar---->
<!-----icono de comprar---->
</div>
</div>
<div class="caja4hijo">
<div class="titulo-art espacio-art">3M™ Littmann® Pediatrico Edición Especial</div>
<div class="imagen-art espacio-art">
<a class="picfancy" href="img/art-varios/kit-classicii.jpg" title="3M™ Littmann® Pediatrico Edición Especial"><img src="img/art-varios/kit-classicii.jpg" width="133" alt="" /></a>
</div>
<div class="boton-art espacio-art">
<!-----icono de comprar---->
<!-----icono de comprar---->
</div>
</div>
</div>
</article>
Gracias amigos