html - div的水平对齐

我正在尝试在页面上设计如下内容：



基本上，我需要确保四列居中并在顶部（垂直）对齐。我可以使用以下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内水平居中。有办法防止这种情况吗？我找不到可能会有所帮助的“水平对齐”属性。

最佳答案

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