html - div的水平对齐

Question

我正在尝试在页面上设计这样的东西:

基本上，我需要确保四列居中并在顶部(垂直)对齐。我能够使用以下 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>

然而，这是我渲染它时的样子:

问题是；文本也在子 div 中水平居中。有没有办法防止这种情况？我找不到可能有帮助的“水平对齐”属性。

Answer 1

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