2

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
body{
	background-image: url(../img/login.png);
	background-size: cover;
	margin: 0px;
	padding: 0px;
}

.caja-login {
	margin: 0px;
	vertical-align: center;
	height: auto;
	min-height: 100px;
    min-height: 100vh;
  	display: flex;
  	align-items: center;
  	background: rgba(191, 233, 252, 0.5);
}
.container, .row{
	flex-wrap: unset;
	padding-left: -30px;
}

#login{
	text-align: center;
	width: 300px;
	margin: auto;
}
#texto-login{
	padding-top: 15%;
	vertical-align: center;
	background: rgba(191, 233, 252, 0.5);
}
input#user,input#pass,input#Enviar{
	margin: 5px auto;
	padding: 5px 10px;
	border-radius: 7px;
	box-shadow: 5px 5px 0 #333;
   -webkit-box-shadow: 5px 5px 0 #333;
   -moz-box-shadow: 5px 5px 0 #333;
   	
}
.caja {
	margin: 10px;
	box-shadow: 5px 5px 0 #333;
   	-webkit-box-shadow: 5px 5px 0 #333;
   	-moz-box-shadow: 5px 5px 0 #333;
   	background-color: #7b7c7a;
}
.login-logo{
	border-radius: 7px;
	border: 2px solid blue;
	display: block;
	margin: 15px auto;
	width: 35%;

	box-shadow: 5px 5px 0 #333;
   -webkit-box-shadow: 5px 5px 0 #333;
   -moz-box-shadow: 5px 5px 0 #333;
}
.caja #logo{
	border-radius: 7px;
	display: block;
	margin: auto;
	width: 40%;

	box-shadow: 5px 5px 0 #333;
   -webkit-box-shadow: 5px 5px 0 #333;
   -moz-box-shadow: 5px 5px 0 #333;
}
.icono-sector{
	color: white;
	font-weight: bold;
	text-align: right;
	size: 24px;
	align-items: right;
}
.caja-superior{
	font-family: 'Montserrat', sans-serif;
	margin-top: 15px; 
	padding: 10px 0;
	border-top: 1px solid black;
	border-right: 1px solid black;
	border-left: 1px solid black;
	border-radius: 7px 7px 0 0;
	text-align: center;
	background-color: #FFA200;
	color: white;
	font-weight: bold;
}
.caja-medio{
	font-family: 'Montserrat', sans-serif;
	padding: 10px;
	border-right: 1px solid black;
	border-left: 1px solid black;
	text-align: center;
	background-color: #FFA200;
	color: white;
	font-weight: bold;
}
.caja-inferior{
	font-family: 'Montserrat', sans-serif;
	padding: 10px;
	border-right: 1px solid black;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	border-radius: 0 0 7px 7px;
	text-align: center;
	background-color: #FFA200;
	color: white;
	font-weight: bold;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="./css/normalize.css">
	<link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/all.css">
    <link rel="stylesheet" href="./css/styles.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/all.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/scripts.js"></script>
</head>
<body>
    <div class="col-lg-12 enunciados"><h1>RED DE EMPRESAS COLABORADORAS</h1></div>
    <div class="container">
        <div class="row">
            <div class="col-sm-3 jumbotron caja">
                <div>
                    <img src="./img/logo.png" alt="Logo Corporativo" id="logo">
                </div>
                <div>
                    <div class="col-sm-12 caja-superior">EMPRESA</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SECTOR</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">WEB</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">E-MAIL</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">TELÉFONO</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SERVICIOS</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
                </div>
            </div>
            <div class="col-sm-3 jumbotron caja">
                <div>
                    <img src="./img/logo.png" alt="Logo Corporativo" id="logo">
                </div>
                <div>
                    <div class="col-sm-12 caja-superior">EMPRESA</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SECTOR</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">WEB</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">E-MAIL</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">TELÉFONO</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SERVICIOS</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
                </div>
            </div>
            <div class="col-sm-3 jumbotron caja">
                <div>
                    <img src="./img/logo.png" alt="Logo Corporativo" id="logo">
                </div>
                <div>
                    <div class="col-sm-12 caja-superior">EMPRESA</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SECTOR</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">WEB</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">E-MAIL</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">TELÉFONO</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SERVICIOS</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
                </div>
            </div>
            <div class="col-sm-3 jumbotron caja">
                <div>
                    <img src="./img/logo.png" alt="Logo Corporativo" id="logo">
                </div>
                <div>
                    <div class="col-sm-12 caja-superior">EMPRESA</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SECTOR</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">WEB</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">E-MAIL</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">TELÉFONO</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SERVICIOS</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
                </div>
            </div>
        </div>
                <div class="row">
            <div class="col-sm-3 jumbotron caja">
                <div>
                    <img src="./img/logo.png" alt="Logo Corporativo" id="logo">
                </div>
                <div>
                    <div class="col-sm-12 caja-superior">EMPRESA</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SECTOR</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">WEB</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">E-MAIL</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">TELÉFONO</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SERVICIOS</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
                </div>
            </div>
            <div class="col-sm-3 jumbotron caja">
                <div>
                    <img src="./img/logo.png" alt="Logo Corporativo" id="logo">
                </div>
                <div>
                    <div class="col-sm-12 caja-superior">EMPRESA</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SECTOR</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">WEB</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">E-MAIL</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">TELÉFONO</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SERVICIOS</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
                </div>
            </div>
            <div class="col-sm-3 jumbotron caja">
                <div>
                    <img src="./img/logo.png" alt="Logo Corporativo" id="logo">
                </div>
                <div>
                    <div class="col-sm-12 caja-superior">EMPRESA</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SECTOR</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">WEB</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">E-MAIL</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">TELÉFONO</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SERVICIOS</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
                </div>
            </div>
            <div class="col-sm-3 jumbotron caja">
                <div>
                    <img src="./img/logo.png" alt="Logo Corporativo" id="logo">
                </div>
                <div>
                    <div class="col-sm-12 caja-superior">EMPRESA</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SECTOR</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">WEB</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">E-MAIL</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">TELÉFONO</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SERVICIOS</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
                </div>
            </div>
        </div>
                <div class="row">
            <div class="col-sm-3 jumbotron caja">
                <div>
                    <img src="./img/logo.png" alt="Logo Corporativo" id="logo">
                </div>
                <div>
                    <div class="col-sm-12 caja-superior">EMPRESA</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SECTOR</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">WEB</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">E-MAIL</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">TELÉFONO</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SERVICIOS</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
                </div>
            </div>
            <div class="col-sm-3 jumbotron caja">
                <div>
                    <img src="./img/logo.png" alt="Logo Corporativo" id="logo">
                </div>
                <div>
                    <div class="col-sm-12 caja-superior">EMPRESA</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SECTOR</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">WEB</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">E-MAIL</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">TELÉFONO</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SERVICIOS</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
                </div>
            </div>
            <div class="col-sm-3 jumbotron caja">
                <div>
                    <img src="./img/logo.png" alt="Logo Corporativo" id="logo">
                </div>
                <div>
                    <div class="col-sm-12 caja-superior">EMPRESA</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SECTOR</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">WEB</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">E-MAIL</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">TELÉFONO</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SERVICIOS</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
                </div>
            </div>
            <div class="col-sm-3 jumbotron caja">
                <div>
                    <img src="./img/logo.png" alt="Logo Corporativo" id="logo">
                </div>
                <div>
                    <div class="col-sm-12 caja-superior">EMPRESA</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SECTOR</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">WEB</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">E-MAIL</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">TELÉFONO</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-medio">SERVICIOS</div>
                </div>
                <div>
                    <div class="col-sm-12 caja-inferior">DIRECCIÓN</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

me estoy volviendo loco porque no soy capaz de centrar en una web las cajas que podéis ver en la foto adjunta. Lo que se ve en rojo es el ROW que como en cada caja col-sm-3 le añado un margin-left: 10px, las 4 cajas sobrepasan el ROW y no me deja centrarlo. Se come los 30+10 ( los últimos 10 no se notan) px de la derecha.

Tengo deshabilitado el flex-wrap porque sino me saltaría a la línea de abajo, Sé que lo que debo hacer es comerme los 30px en la izquierda. Pero como digo no se muy bien como hacerlo, ya que al poner un margin-left: -30px. Se va todo al garete. Incluso he probado poner un padding-left: -30px. pero no me lo centra.

Alguna idea? GRACIASintroducir la descripción de la imagen aquí

1
  • ¿Podrías poner el HTML de ejemplo? Commented el 15 abr. 2020 a las 13:04

2 respuestas 2

0

El problema que veo es que no usas Bootstrap correctamente.

Te dejo un ejemplo básico, que cual yo creo que estás buscando:

[class^="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.caja {
  height: 200px;
  margin: 8px;
  text-align: center;
  background: #cccccc;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
    <div class="row">
      <div class="col-12 col-sm-3">
        <div class="caja">Caja 1</div>
      </div>
      <div class="col-12 col-sm-3">
        <div class="caja">Caja 2</div>
      </div>
      <div class="col-12 col-sm-3">
        <div class="caja">Caja 3</div>
      </div>
      <div class="col-12 col-sm-3">
        <div class="caja">Caja 4</div>
      </div>      
    </div>
    <div class="row">
      <div class="col-12 col-sm-3">
        <div class="caja">Caja 5</div>
      </div>
      <div class="col-12 col-sm-3">
        <div class="caja">Caja 6</div>
      </div>
      <div class="col-12 col-sm-3">
        <div class="caja">Caja 7</div>
      </div>
      <div class="col-12 col-sm-3">
        <div class="caja">Caja 8</div>
      </div>
    </div>
  </div>

1
  • Buenas, perdon pero no me debo explicar bien. El problema lo tengo en que el DIV ROW está centrado y funciona bien, la cosa está en que cuando pongo las cajas (jumbotron) y les doy un pequeño MARGIN para separarlos, la suma de los MARGIN sobrepasa el ancho del DIV ROW y eso hace que la fila no esté centrada. O mejor dicho, tengo un DIV ROW centrado. Como puedo hacer que todo el contenido del DIV ROW esté centrado?
    – NOE MORENO
    Commented el 15 abr. 2020 a las 19:32
0

El problema que tiene es que cierra demasiado rápido la fila, además de que genera varios div sin cierre. Recomiendo que use la documentación de bootstrap, es muy sencilla y perfecta para buenas prácticas.

Cuando creas paginas web no debería utilizar el mismo ID en varios componentes.

Así quedaría el código:

!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login</title>
    <link rel="stylesheet" href="./css/normalize.css" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/all.css" />
    <link rel="stylesheet" href="./css/styles.css" />
    <script src="./js/jquery.min.js"></script>
    <script src="./js/all.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/scripts.js"></script>
  </head>
  <body>
    <div class="enunciados text-center">
      <h1>RED DE EMPRESAS COLABORADORAS</h1>
    </div>
    <div class="container text-center">
      <div class="row">
        <div class="col-sm-3 caja">
          <img src="./img/logo.png" alt="Logo Corporativo" id="logo" />
          <div class="caja-superior">EMPRESA</div>
          <div class="caja-medio">SECTOR</div>
          <div class="caja-medio">WEB</div>
          <div class="caja-medio">E-MAIL</div>
          <div class="caja-medio">TELÉFONO</div>
          <div class="caja-medio">SERVICIOS</div>
          <div class="caja-inferior">DIRECCIÓN</div>
        </div>
        <div class="col-sm-3 caja">
          <img src="./img/logo.png" alt="Logo Corporativo" id="logo" />
          <div class="caja-superior">EMPRESA</div>
          <div class="caja-medio">SECTOR</div>
          <div class="caja-medio">WEB</div>
          <div class="caja-medio">E-MAIL</div>
          <div class="caja-medio">TELÉFONO</div>
          <div class="caja-medio">SERVICIOS</div>
          <div class="caja-inferior">DIRECCIÓN</div>
        </div>
        <div class="col-sm-3 caja">
          <img src="./img/logo.png" alt="Logo Corporativo" id="logo" />
          <div class="caja-superior">EMPRESA</div>
          <div class="caja-medio">SECTOR</div>
          <div class="caja-medio">WEB</div>
          <div class="caja-medio">E-MAIL</div>
          <div class="caja-medio">TELÉFONO</div>
          <div class="caja-medio">SERVICIOS</div>
          <div class="caja-inferior">DIRECCIÓN</div>
        </div>
        <div class="col-sm-3 caja">
          <img src="./img/logo.png" alt="Logo Corporativo" id="logo" />
          <div class="caja-superior">EMPRESA</div>
          <div class="caja-medio">SECTOR</div>
          <div class="caja-medio">WEB</div>
          <div class="caja-medio">E-MAIL</div>
          <div class="caja-medio">TELÉFONO</div>
          <div class="caja-medio">SERVICIOS</div>
          <div class="caja-inferior">DIRECCIÓN</div>
        </div>

        <div class="col-sm-3 caja">
          <img src="./img/logo.png" alt="Logo Corporativo" id="logo" />
          <div class="caja-superior">EMPRESA</div>
          <div class="caja-medio">SECTOR</div>
          <div class="caja-medio">WEB</div>
          <div class="caja-medio">E-MAIL</div>
          <div class="caja-medio">TELÉFONO</div>
          <div class="caja-medio">SERVICIOS</div>
          <div class="caja-inferior">DIRECCIÓN</div>
        </div>
        <div class="col-sm-3 caja">
          <img src="./img/logo.png" alt="Logo Corporativo" id="logo" />
          <div class="caja-superior">EMPRESA</div>
          <div class="caja-medio">SECTOR</div>
          <div class="caja-medio">WEB</div>
          <div class="caja-medio">E-MAIL</div>
          <div class="caja-medio">TELÉFONO</div>
          <div class="caja-medio">SERVICIOS</div>
          <div class="caja-inferior">DIRECCIÓN</div>
        </div>
        <div class="col-sm-3 caja">
          <img src="./img/logo.png" alt="Logo Corporativo" id="logo" />
          <div class="caja-superior">EMPRESA</div>
          <div class="caja-medio">SECTOR</div>
          <div class="caja-medio">WEB</div>
          <div class="caja-medio">E-MAIL</div>
          <div class="caja-medio">TELÉFONO</div>
          <div class="caja-medio">SERVICIOS</div>
          <div class="caja-inferior">DIRECCIÓN</div>
        </div>
        <div class="col-sm-3 caja">
          <img src="./img/logo.png" alt="Logo Corporativo" id="logo" />
          <div class="caja-superior">EMPRESA</div>
          <div class="caja-medio">SECTOR</div>
          <div class="caja-medio">WEB</div>
          <div class="caja-medio">E-MAIL</div>
          <div class="caja-medio">TELÉFONO</div>
          <div class="caja-medio">SERVICIOS</div>
          <div class="caja-inferior">DIRECCIÓN</div>
        </div>
        <div class="col-sm-3 caja">
          <img src="./img/logo.png" alt="Logo Corporativo" id="logo" />
          <div class="caja-superior">EMPRESA</div>
          <div class="caja-medio">SECTOR</div>
          <div class="caja-medio">WEB</div>
          <div class="caja-medio">E-MAIL</div>
          <div class="caja-medio">TELÉFONO</div>
          <div class="caja-medio">SERVICIOS</div>
          <div class="caja-inferior">DIRECCIÓN</div>
        </div>
        <div class="col-sm-3 caja">
          <img src="./img/logo.png" alt="Logo Corporativo" id="logo" />
          <div class="caja-superior">EMPRESA</div>
          <div class="caja-medio">SECTOR</div>
          <div class="caja-medio">WEB</div>
          <div class="caja-medio">E-MAIL</div>
          <div class="caja-medio">TELÉFONO</div>
          <div class="caja-medio">SERVICIOS</div>
          <div class="caja-inferior">DIRECCIÓN</div>
        </div>
        <div class="col-sm-3 caja">
          <img src="./img/logo.png" alt="Logo Corporativo" id="logo" />
          <div class="caja-superior">EMPRESA</div>
          <div class="caja-medio">SECTOR</div>
          <div class="caja-medio">WEB</div>
          <div class="caja-medio">E-MAIL</div>
          <div class="caja-medio">TELÉFONO</div>
          <div class="caja-medio">SERVICIOS</div>
          <div class="caja-inferior">DIRECCIÓN</div>
        </div>
        <div class="col-sm-3 caja">
          <img src="./img/logo.png" alt="Logo Corporativo" id="logo" />
          <div class="caja-superior">EMPRESA</div>
          <div class="caja-medio">SECTOR</div>
          <div class="caja-medio">WEB</div>
          <div class="caja-medio">E-MAIL</div>
          <div class="caja-medio">TELÉFONO</div>
          <div class="caja-medio">SERVICIOS</div>
          <div class="caja-inferior">DIRECCIÓN</div>
        </div>

        <div class="col-sm-3 caja">
          <img src="./img/logo.png" alt="Logo Corporativo" id="logo" />
          <div class="caja-superior">EMPRESA</div>
          <div class="caja-medio">SECTOR</div>
          <div class="caja-medio">WEB</div>
          <div class="caja-medio">E-MAIL</div>
          <div class="caja-medio">TELÉFONO</div>
          <div class="caja-medio">SERVICIOS</div>
          <div class="caja-inferior">DIRECCIÓN</div>
        </div>
        <div class="col-sm-3 caja">
          <img src="./img/logo.png" alt="Logo Corporativo" id="logo" />
          <div class="caja-superior">EMPRESA</div>
          <div class="caja-medio">SECTOR</div>
          <div class="caja-medio">WEB</div>
          <div class="caja-medio">E-MAIL</div>
          <div class="caja-medio">TELÉFONO</div>
          <div class="caja-medio">SERVICIOS</div>
          <div class="caja-inferior">DIRECCIÓN</div>
        </div>
        <div class="col-sm-3 caja">
          <img src="./img/logo.png" alt="Logo Corporativo" id="logo" />
          <div class="caja-superior">EMPRESA</div>
          <div class="caja-medio">SECTOR</div>
          <div class="caja-medio">WEB</div>
          <div class="caja-medio">E-MAIL</div>
          <div class="caja-medio">TELÉFONO</div>
          <div class="caja-medio">SERVICIOS</div>
          <div class="caja-inferior">DIRECCIÓN</div>
        </div>
        <div class="col-sm-3 caja">
          <img src="./img/logo.png" alt="Logo Corporativo" id="logo" />
          <div class="caja-superior">EMPRESA</div>
          <div class="caja-medio">SECTOR</div>
          <div class="caja-medio">WEB</div>
          <div class="caja-medio">E-MAIL</div>
          <div class="caja-medio">TELÉFONO</div>
          <div class="caja-medio">SERVICIOS</div>
          <div class="caja-inferior">DIRECCIÓN</div>
        </div>
      </div>
    </div>
  </body>
</html>

2
  • No. Perdona la idea es imprimir 4 tarjetas por fila. Y que las muestre como la imagen de arriba.Gracias
    – NOE MORENO
    Commented el 15 abr. 2020 a las 16:21
  • Kendrick el problema esta en que en el lado izquierdo es mas grande que el margen derecho y no queda centrado.
    – NOE MORENO
    Commented el 15 abr. 2020 a las 16:27

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.