0

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:

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

3
  • Daniel, viendo tu código, solo esta el "Gris" y el "Negro" en la primera tabla, no en la segunda. Por casualidad adjuntaste el código de la segunda tabla. Se que esta, pero no están los elementos donde dice "Comprar". Por favor, puedes compartir dicho código para poder dar solución? Commented el 13 abr. 2017 a las 20:20
  • Donde debe ir el boton, es un formulario no lo puse completo porque contiene datos sensibles, pero en resumen es un formulario con una imagen de boton de compra.
    – Daniel
    Commented el 14 abr. 2017 a las 0:37
  • @Daniel, no olvides marcar la respuesta que consideres correcta por favor. Te invito a hacer el tour para que sepas cómo funciona el sitio.
    – gugadev
    Commented el 28 abr. 2017 a las 12:32

2 respuestas 2

0

Como no logre captar bien como lo tenias en el real, preferí colocarte del mismo modo.

<div class="boton-art espacio-art">
    <table>
        <tr>
            <td>
                <div>
                    Gris
                </div>
            </td>
            <td>
                <div>
                    <!-----icono de comprar---->
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div>
                    Negro
                </div>
            </td>
            <td>
                <div>
                    <!-----icono de comprar---->
                </div>
            </td>
        </tr>
    </table>
</div>

A pesar que es un poco mas de trabajo, pero en una tabla puedes manipular mejor el manejo de lo que hablabas. Y de esta forma lo resuelves rápido.

Saludos, espero haberte ayudado!

2
  • Veo que eliminaste una respuesta muy parecida. En caso no lo sepas, puedes editar una respuesta eliminada. Una vez que la editas, le das click en recuperar para restaurarla. Saludos.
    – gugadev
    Commented el 13 abr. 2017 a las 20:44
  • 1
    No quería usar tablas pero ahora es la solución mas radical. gracias
    – Daniel
    Commented el 14 abr. 2017 a las 0:29
0

No sé que etiqueta usas para mostrar el texto, por eso, te recomiendo hacer el text inline-block:

.espacio-art {
  display: block;
  margin: 10px auto; /* Solo para centrar aquí */
  width: 200px;
}

p {
  color: #333;
  display: inline-block;
  font-family: sans-serif;
  font-size: 15px;
  margin-right: 5px;
}

button {
  background-color: orangered;
  border: none;
  border-radius: 3px;
  color: #fff;
  padding: 8px 14px;
}
<article class="espacio-art">
  <p>Negro</p>
  <button>Comprar</button>
</article>

Otra forma es usando Flexbox definiendo una orientación horiztonal:

.espacio-art {
  align-items: center;
  display: flex;
  width: 150px;
}

p {
  color: #333;
  font-family: sans-serif;
  font-size: 15px;
  margin-right: 5px;
}

button {
  background-color: orangered;
  border: none;
  border-radius: 3px;
  color: #fff;
  padding: 8px 14px;
}
<article class="espacio-art">
  <p>Gris</p>
  <button>Comprar</button>
</article>

En este caso no es necesario usar inline-block en los hijos, porque cuando se usa display: flex los hijos son posicionados horizontalmente, sin importar qué tipo de display tengan.

2
  • El formulario con su boton ya este hecho, es mas largo el codigo no lo puse todo porque contiene datos sensibles. lo que dese es que el texo, gris o negro este el lado izquierdo, alguna forma de hacerlo?
    – Daniel
    Commented el 14 abr. 2017 a las 0:27
  • @Daniel perdón, entendí justamente lo contrario. He actualizado mi respuesta.
    – gugadev
    Commented el 14 abr. 2017 a las 13:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.