Align text with your image

Question

Align text with your image

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hello colleagues I have a text next to an image that is a form (purchase button) How do I make the text to the left side of the image in the center like this

I have used inline among others but it does not work out.

Next I attach code:

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

Thank you friends

css div

asked by Daniel 13.04.2017 в 22:05

source

2 answers

0

I do not know what label you use to show the text, so, I recommend you make the 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>

Another way is using Flexbox defining a horiztonal orientation:

.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>

In this case it is not necessary to use inline-block in the children, because when display: flex is used the children are positioned horizontally, no matter what type of display they have.

answered by 13.04.2017 в 22:28

"Filter" results based on parameter sent by url in PHP Accents in session flash de laravel 5.2

score 0 · Accepted Answer

As I can not capture well how you had it in the real, I preferred to place you in the same way.

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

Although it is a bit more work, but in a table you can manipulate better the handling of what you were talking about. And in this way you solve it quickly.

Greetings, I hope I have helped you!