Skip to main content

alinear Alinear texto al lado de unacon su imagen que es un formualrio

Hola compañeros Tengo un texto al lado de una imagen que es un formulario (botonbotón de compra) como hago para que el texto me quede al lado izquierdo de la imagen en el centro como esta Asi como estaAsí como esta asi es como me quedaasí es como me queda he

He usado inline entre otras pero no me sale.

A continuación adjunto código:

alinear texto al lado de una imagen que es un formualrio

Hola compañeros Tengo un texto al lado de una imagen que es un formulario (boton de compra) como hago para que el texto me quede al lado izquierdo de la imagen en el centro como esta Asi como esta asi es como me queda he usado inline entre otras pero no me sale

Alinear texto con su imagen

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 Así como esta así es como me queda

He usado inline entre otras pero no me sale.

A continuación adjunto código:

Ordenar código
Origen Enlace
gugadev
  • 19.1k
  • 1
  • 27
  • 49
/*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;padding0;
  padding: 5px 0; 
}
<article>
             <div class="cajapadre">
  <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">
      <div class="imagen-art espacio-art"><a<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>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">
       <div class="imagen-art espacio-art"><a<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>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">
      <div class="imagen-art espacio-art"><a<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>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">
       <div class="imagen-art espacio-art"><a<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>a>
                        </div>
                   
      <div class="boton-art espacio-art">
        <!-----icono de comprar---->

        <!-----icono de comprar---->
                        </div>
                        </div>
                    </div>
                </article>
/*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>
/*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>
Origen Enlace
Daniel
  • 439
  • 2
  • 8
  • 22

alinear texto al lado de una imagen que es un formualrio

Hola compañeros Tengo un texto al lado de una imagen que es un formulario (boton de compra) como hago para que el texto me quede al lado izquierdo de la imagen en el centro como esta Asi como esta asi es como me queda he usado inline entre otras pero no me sale

/*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