1

intento poner mi recuadro color negro con transparencia al lado derecho, que el texto abarque todo el recuadro de color y bajar mi texto pero no me está quedando. Esto trabajando con un slider.

Este es mi código.

.carousel-caption {
    background: linear-gradient(to right, rgba(44, 62, 80, .7), rgba(44, 62, 80, .7));
    width: 50%;
    height: 100%;
    float: right!important;
    top: 0;
}
<div class="carousel-item active">
            <img alt="Los Angeles" height="auto" src="<?=base_url()?>images/carousel/centro_sur4.jpg" width="100%">
                <div class="carousel-caption">
                    <div class="col-md-6 col-sm-8 col-10 offset-md-6 offset-sm-2 offset-1 text-carousel text-center">
                        <h3>
                            ¡Bienvenido a Querétaro!
                        </h3>
                        <p>
                            Muchas empresas nacionales  y extranjeras  se instalan en Querétaro cada mes y  en Abacom sabemos lo importante que es arrancar sin contratiempos.
                        </p>
                        <p>
                            Permita a Abacom ser su aliado tecnológico y apoye con expertos en conectividad de su empresa. Conozca como hemos ayudado a otras empresas en sus inicios
                            <a class="dark-blue" href="<?=base_url()?>index.php/abacom/testimoniales">
                                <mark>
                                    aquí
                                </mark>
                            </a>
                            e imagine lo que podemos hacer por usted.
                        </p>
                        <a class="btn btn-transparent-white btn-medium border-radius-4" href="" target="_blank">
                            <i class="fa fa-plus">
                            </i>
                            Ver más
                        </a>
                    </div>
                </div>
            </img>
        </div>

Este es mi resultado

introducir la descripción de la imagen aquí

Espero que me puedan apoyar.

Lo que quiero hacer es recorrer el recuadro de color gris hacia donde esta la marca color rojo y centrar el texto que esta dentro del recuadro color gris como se muestra en el ejemplo color rojo.

introducir la descripción de la imagen aquí

5
  • Podrías explicar un poco mejor? No entiendo lo que necesitas... Algún ejemplo de lo que quieres lograr?
    – Patrick
    Commented el 29 mar. 2019 a las 17:09
  • ya anexe una imagen como ejemplo
    – Javier fr
    Commented el 29 mar. 2019 a las 17:16
  • Estas usando bootstrap? porque no lo manejas con las columnas ? Commented el 29 mar. 2019 a las 17:22
  • si utilizo bootstrap, y si me muestras un ejemplo?
    – Javier fr
    Commented el 29 mar. 2019 a las 17:26
  • Hola, si estás con bootstrap te recomiendo usar flex para estas cosas, te dejo link a la documentacion. Documentación. Hay varias formas de ordenar los elementos pero acorde a tu imagen creo que la clase que tienes que ocupar es class="d-flex justify-content-between" Commented el 29 mar. 2019 a las 18:18

1 respuesta 1

2

Una de las mejores formas de alinear elementos en CSS es usar las propiedades de flexbox (Cajas flexibles), fácilmente puedes organizar su layout con base a sus necesidades.

Le dejo un ejemplo sencillo de cómo puedes alinear elementos en los ejes con flexbox.

Display: flex: Le permite acomodar elementos uno al lado del otro.

Justify-content: Permite acomodar los elementos en el eje horizontal.

Align – ítems: acomoda los elementos en el eje vertical.

Lo invito a que consultes un poco más sobre Flexbox y sus propiedades, o bien puede buscar en la documentación de Bootstrap el uso de las etiquetas indicadas para centrar elementos o usar esta forma que le expongo.

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.container {
  background: url("https://stackoverflow.blog/wp-content/uploads/2018/05/SO_Teams.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.container .content {
  width: 100%;
  height: auto;
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.container .content .card {
  background: rgba(255, 255, 255, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 300px;
  height: 350px;
  padding: 0px 20px;
  text-align: center;
  margin: 0;
  border-radius: 5px;
}

.container .content .card h1 {
  margin: 0;
  padding: 10px 0px;
  font-size: 20px;
  text-transform: uppercase;
}

.container .content .card p {
  padding: 0;
  margin: 0;
}

.container .content .card .btn {
  background: transparent;
  border: none;
  outline: none;
  line-height: 2;
  padding: 5px 15px;
  font-size: 15px;
  margin-top: 15px;
  border: 1px solid #FFF;
  color: #FFF;
  cursor: pointer;
  -webkit-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}

.container .content .card .btn:hover {
  background: #FFF;
  color: #000;
}

.container .content .card .btn:active {
  -webkit-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
}
<!DOCTYPE html>
<html lang="es">

<head>
    <title>Ejemplo para Stackoverflow</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="Css/Estilos.css">
</head>

<body>
    <section class="container">
        <div class="content">
            <div class="card">
                <div class="title">
                    <h1>Lorem, ipsum.</h1>
                </div>
                <div class="info">
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse quas perferendis ut quis? Veniam
                        id,
                        impedit aliquam maiores possimus minima similique laudantium quia voluptatem non reprehenderit.
                        Placeat sapiente architecto alias!</p>
                </div>
                <button class="btn">Ver Más</button>
            </div>
        </div>
    </section>
</body>

</html>

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.