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 。有办法防止这种情况吗？我无法找到＆＃34;水平对齐＆＃34;可能有帮助的财产。

Answer 1

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

Answer 2

试试这个

.child p{
 text-align: left;

}

.child ul li{

text-align: left;

}

评论，如果它有效

Answer 3

所有文本都居中，因为您在父元素上使用text-align:center;。

如果您需要重新配置text-align;您必须添加text-align:left;或text-align:right;才能在左侧或右侧移动文字。

在您的情况下，您必须在课程text-align:left上添加.child。

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

Answer 4

问题是继承，如果较高的标记具有像 text-align：center 这样的属性，则所有较低的类都将采用相同的设置。

因此，如果您想更改此设置，则必须将其覆盖为 text-align：left ，例如
Suresh Ponnukalai 说。

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