0

Mi idea es tener un contenedor div dentro de este div todo el contexto o datos deben estar centrados o en el medio del div, pero que no afecte a ciertos contenidos por decir el texto deseo que este justificado.

Este es mi código:

.grid-x2 {
    border: solid;
    width: 40%;
    margin: 0 auto;
    background-color: #f8f9fa;
    border: 1px solid #b7d4da;
    height: 600px;
}
.plan-info-agile {
    margin: 0 auto;
}
.check-services {
    color: #5a7177;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    background: url(assets/img/system/check-services.svg) left center no-repeat;
    padding-left: 20px;
    display: inline-block;
    box-sizing: border-box;
}

p {
    text-align: justify;
}
<div class="grid-x2 right">
	<div class="plan-info-agile">
		<p><span class="check-services">Services 1</span></p>
		<p><span class="check-services">Services 2</span></p>
		<p><span class="check-services">Services 3</span></p>
		<p><span class="check-services">Services 4</span></p>
		<p><span class="check-services">Services 5</span></p>
	</div>
</div>

Lo que deseo lograr es lo siguiente: introducir la descripción de la imagen aquí

Sin tener que usar la propiedad padding-left:; con valores personalizados.

1 respuesta 1

1

.grid-x2 {
    border: solid;
    width: 40%;
    margin: 0 auto;
    background-color: #f8f9fa;
    border: 1px solid #b7d4da;
    height: 600px;
}
.plan-info-agile {
    margin: 0 auto;
}
.check-services {
    color: #5a7177;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    background: url(assets/img/system/check-services.svg) left center no-repeat;
    display: inline-block;
    box-sizing: border-box;
}

p {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
<div class="grid-x2 right">
	<div class="plan-info-agile">
		<p><span class="check-services">Services 1</span></p>
		<p><span class="check-services">Services 2</span></p>
		<p><span class="check-services">Services 3</span></p>
		<p><span class="check-services">Services 4</span></p>
		<p><span class="check-services">Services 5</span></p>
	</div>
</div>

Creo que esto es lo que buscas, a las etiquetas p las tratas con display: flex, y remueves el padding-left a tus elementos .check-services

1
  • Hola @Edwin Sí exactamente gracias :)
    – Carolina
    Commented el 18 nov. 2018 a las 16:03

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.