Question

我有一个问题，两个div水平居中于彼此：其中一个从容器div的顶部开始，但另一个不是。我尝试修复它，但只找到了不太正确或正确的解决方案。

这是怎么回事：

<div id="missingSchoolProgram">
    <div id="missingSchool">
        <p>Votre école n'est pas dans la liste? Remplissez ce court formulaire afin de nous le signaler et qu'elle soit ajoutée plus rapidement!</p>
        <br /><br /><br />
        <form action="missingSchoolMail.php" method="POST">
            <p>Nom de l'école:</p>
            <input type="text" name="name" required="required" /><br /><br /><br />
            <input type="submit" name="submit" value="Signaler l'école manquante" /><br />
        </form>
    </div>
    <div id="missingProgram">
        <p>Votre programme n'est pas dans la liste? Remplissez ce court formulaire afin de nous le signaler et qu'il soit ajouté plus rapidement!</p>
        <br /><br /><br />
        <form action="missingProgramMail.php" method="POST">
            <p>Nom du programme:</p>
            <input type="text" name="name" required="required" /><br />
            <p>ID du programme (Ex.: 210.C1):</p>
            <input type="text" name="programID" maxlength="6" required="required" /><br /><br /><br />
            <input type="submit" name="submit" value="Signaler le programme manquant" /><br />
        </form>
    </div>
</div>

这些div的css如下......

#missingSchoolProgram
{
    width: 100%;
    text-align: center;
    border-top: 1px solid #e2e2e2;
    padding-top: 15px;
}

#missingSchoolProgram form
{
    background-color: #e7edf1;
    border: 1px solid #ccdce4;
    padding: 15px;
    text-align: center;
}

#missingSchool
{
    width: 250px;
    text-align: center;
    padding: 15px;
    border: 1px solid black;
    display: inline-block;
}

#missingProgram
{
    width: 250px;
    text-align: center;
    padding: 15px;
    border: 1px solid black;
    display: inline-block;
}

这是一个jsfiddle所以你们可以看到这个问题...... http://jsfiddle.net/7taEu/1/

在GoDaddy的服务器搞砸了之前，这些事情很有效，我的网站被带回了它的最后一次保存......

Answer 1

将vertical-align: top添加到#missingSchool。

http://jsfiddle.net/7taEu/3/

Answer 2

我认为你必须添加一个浮动：左;到#missingSchool元素。

#missingSchool
{
    width: 250px;
    text-align: center;
    padding: 15px;
    border: 1px solid black;
    display: inline-block;
    float: left;
}

http://jsfiddle.net/7taEu/2/

Div不是从容器顶部开始的

2 个答案: