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:
Sin tener que usar la propiedad padding-left:;
con valores personalizados.