0

soy un principiante en html, quería preguntar cómo puedo conseguir que la foto de la señal de peligro y el rectángulo de texto inferiores estén en la misma línea y centrados, he intentado modificar los márgenes, pero siguen apareciendo en diferentes líneas.

introducir la descripción de la imagen aquí

Esto es lo que intenté:

<div class="container" style="text-align:center">
    <div style="text-align:center; width:300px;height:80px; margin-left:auto; margin-right:auto; margin-bottom:5%; border:1px solid #000;">Lays Gourmet, producto mejor situado por su baja sal(1,2g/100g) y grasas(31,7g/100g)</div>
    <a><img src="papas_sinfondo.png" style="width:15%; height:15%" ></a> 
    <br>

</div>

<div>
    <br>

    <div class="col-xs-2"><img src="señal_peligro.png" style="width:15%; height:15%"></div>
    <div class="col-xs-6">
        <div class="container">
            <div  style="text-align:center; width:300px; height:80px;margin:0;margin-bottom:5%; border:1px solid #000;">Lays Gourmet, producto mejor situado por su baja sal(1,2g/100g) y grasas(31,7g/100g)</div>
        </div>
    </div>
</div>

Gracias

4
  • 1
    podria ser una opcion ponerlos en una tabla?? asi estarian en una fila y cada un en una celda continua Commented el 12 ene. 2019 a las 22:43
  • 1
    Por tu código parece que usas Bootstrap, me equivoco? En todo caso si lo estás usando me parece que está mal implementado, al menos en el extracto del código que posteas se ve así. Dime si usas Bootstrap y cuál versión para saber cómo podemos ayudarte. Saludos Commented el 12 ene. 2019 a las 22:50
  • Hola @MauricioContreras , estoy usando el Bootstrap 4.1.3. Saludos
    – AER
    Commented el 12 ene. 2019 a las 22:52
  • 1
    Podrias usar un position: absolute;
    – Alien69
    Commented el 12 ene. 2019 a las 23:42

2 respuestas 2

2

Esta solución que te daré no es la mejor, tienes mucha deficiencia en tu código, pero trataré de explicarte un poco, aunque te sugiero que busques un tutorial de Bootstrap y complementes con lo que estás aprendiendo de HTML. Hoy en día HTML y CSS son casi inseparables. Bootstrap te hace la vida más fácil, pero la curva de aprendizaje puede ser muy pronunciada si no sabes lo básico de CSS.

Mi solución a tu problema es la siguiente:

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container text-center mb-5">
    <div style="width:300px;height:80px; margin-left:auto; margin-right:auto; margin-bottom:5%; border:1px solid #000;">Lays Gourmet, producto mejor situado por su baja sal(1,2g/100g) y grasas(31,7g/100g)</div>
    <a><img src="http://images.uncyc.org/commons/thumb/b/bf/LAYS_Sour_Cream_Onion_Potato_Chips.png/180px-LAYS_Sour_Cream_Onion_Potato_Chips.png" style="width:15%; height:15%" ></a> 
  </div>

  <div class="container">
    <div class="row">
      <div class="col-xs-2 ml-auto mt-auto mb-auto">
        <img src="https://regcompliance.files.wordpress.com/2009/08/triangle-button.png" style="width:75%; height:75%">
      </div>
      <div class="col-xs-6 mr-auto mt-auto mb-auto">
        <div class="text-center" style="width:300px;height:80px;border:1px solid #000;">Lays Gourmet, producto mejor situado por su baja sal(1,2g/100g) y grasas(31,7g/100g)
        </div>
      </div>
    </div>
  </div>
 </body>

Como puedes ver, he insertado dos elementos div con la clase container de Bootstrap.

En el primero he agregado la clase text-center y la clase mb-5, la primera no te la necesito explicar, pero la segunda es un estilo de Bootstrap que agrega un margen inferior (margin-bottom) de 5 rem a tu container. Ya con eso te sacas bastante de tu código 'hard-codeado' que tenías.

En cuanto al contenido del primer container lo he dejado exactamente igual, excepto que he quitado algunos estilos redundantes, ya que los que apliqué en el parent son suficientes.

El segundo container es el que te interesa. No te explicaré a fondo todo lo que hay allí, pero si te diré que debes tratar de separar tus estilos de tu código HTML, para eso se usan las hojas de estilo, conocidas como CSS.

Lo que hice en el segundo container fue lo siguiente: Agregué un div y le apliqué un estilo row de Bootstrap. Lo hice para poder usar los estilos col. Ya que según la documentación de Bootstrap los elementos tipo col se usan dentro de contenedores tipo row.

Como te imaginarás un elemento row es un elemento que se comporta parecido a la fila de una tabla, por lo tanto los elementos col quedarán alineados en una misma fila. Con eso ya tienes tu imagen y tu cuadro en la misma fila.

Luego, a cada elemento col le apliqué estilos de Bootstrap para establecer los márgenes, y con eso el comportamiento deseado.

El primer elemento col tiene un estilo de ml-auto que indica que el margen a su izquierda será automático, en cierta manera es como si empujara el elemento hacia la derecha hasta que consiga algo que lo frene. Luego le apliqué los estilos mt-auto y mb-auto, así el objeto que se encuentra dentro de col queda centrado verticalmente.

El segundo elemento col tiene un estilo muy parecido al primero, excepto que le aplico mr-auto, así el objeto que está dentro de col es empujado esta vez hacia la izquierda. La magia de todo esto es que ambos elementos col quedan perfectamente centrados horizontalmente.

Espero que esto te sirva como solución.

Nota: Las imágenes usadas tienen licencia de libre uso y distribución.

1

Muy buenas, pues tienes que poner la imagen con float left y vertical align middle y el texto o no le pones nada o float right

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.