CODEWITHSUNDEEP
htmlcss
Arian Motamedi
Arian Motamedi

Reputation: 7413

Horizontal alignment of divs

I'm trying to design something like this on a page:

enter image description here

Basically, I need to make sure the four columns are centered and are aligned on the top (vertically). I was able to achieve this using the following CSS:

.parent
{
    text-align: center;
    font-size: 18px;
}

.child
{
    max-width: 220px;
    height: auto;
    display: inline-block;
    margin: 30px;
    vertical-align: top;
}

<div class="parent">
    <div class="child">
        <h3>The Problem</h3>
        <p>Reliance on fossil fuels face many challenges:</p>
        <ul>
            <li>They have a negative impact on the environment</li>
            <li>Availability and pricing is influenced by foreign interests and stability</li>
            <li>Resources are becoming more scarce and more costly to extract</li>
            <li>Their cost increases each year</li>
        </ul>
    </div>

    <div class="child">
        <h3>The Promise</h3>
        <p>Solar energy offers a powerful promise:</p>
        <ul>
            <li>Inexhaustable supply</li>
            <li>Worldwide availability</li>
            <li>Environmentally clean &#8211; lowest impact to the environment</li>
            <li>Creates jobs in the U.S.</li>
            <li>Cost that will be competitive with traditional generation technologies</li>
        </ul>
    </div>

    <div class="child">
        <h3>The Purpose</h3>
        <p>To develop sustainable environmentally and socially responsible energy solutions:</p>
        <ul>
            <li>Deliver the highest efficiency solar conversion</li>
            <li>Utilize low cost recyclable materials</li>
            <li>Provide cost effective installations for rooftop and ground mount</li>
            <li>Suitable for commercial, utility, and residential applications</li>
        </ul>
    </div>

    <div class="child">
        <h3>The People</h3>
        <p>People are our most important asset:</p>
        <ul>
            <li>Highly skilled and creative staff with over 100 patents</li>
            <li>Leadership team with proven experience  building industry changing businesses</li>
            <li>Committed to making a contribution every day to our customers, community, coworkers and investors</li>
        </ul>
    </div>
</div>

However, this is what it looks like when I render it:

enter image description here

The problem is; the text is also horizontally centered inside the child divs. Is there a way to prevent this? I'm unable to find a "horizontal-align" property which would probably help.

Upvotes: 0

Views: 78

Answers (4)

Kjenos
Kjenos

Reputation: 559

The Problem was the Inheritance, If a higher Tag has an Attribut like text-align: center all lower classes will take the same settings.

So if you wanna change this, you have to overwrite it to text-align: left like
Suresh Ponnukalai said.

.child
{
max-width: 220px;
height: auto;
display: inline-block;
margin: 30px;
vertical-align: top;
text-align:left;
}

Upvotes: 1

Kheema Pandey
Kheema Pandey

Reputation: 10265

All the text is centered because you are using text-align:center; on parent element.

If you need to reconfigure the text-align; you have to add the text-align:left; or text-align:right; to move the text on left or on right.

Here in your case you have to add text-align:left on your class .child.

.child
{
    text-align:left; /*This line need to add*/
    max-width: 220px;
    height: auto;
    display: inline-block;
    margin: 30px;
    vertical-align: top;
}

Upvotes: 1

crafter
crafter

Reputation: 329

Try this

.child p{
 text-align: left;

}

.child ul li{

text-align: left;

}

Comment, if it works or not

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

.child
{
max-width: 220px;
height: auto;
display: inline-block;
margin: 30px;
vertical-align: top;
text-align:left;
}

Upvotes: 1

Related Questions