Html 具有可变文本长度对齐和居中问题的div

我正试图：

在页面上居中放置两个div

同时让他们保持在线

我可以完成其中一个，但由于它们的文本长度不同，另一个不起作用。如果将div居中，则它们彼此不对齐（如图所示交错排列）。我可以通过将它们向左浮动来解决这个问题，但是它们没有居中。当div具有可变的文本长度时，如何在使它们彼此保持内联的同时使它们居中

<div class="bigBox">
    <div class="aboutBox">
        <img class="icon" src="../img/location.png" width="100" height="100">
        <p>I was born and raised in Atlanta, GA, with dreams of moving to California. , heart, skills, art</p>
    </div>

    <div class="aboutBox">
        <img class="icon" src="../img/music.png" width="100" height="100">
        <p>
            I love all types of music, and after watching Guardians of the Galaxy, I gained a new appreciation for 70's music. Follow my Spotify playlist, or listen to it here.
        </p>
    </div>
</div>

---

使用

垂直对齐：顶部

在aboutBox divs上

可以将显示更改为内联表

.aboutBox {
    width:400px;
    height:400px;
    outline:1px solid black;
    text-align:center;
    color:white;
    font-size:1.5em;
    display:inline-block;
}

.bigBox {
    text-align:center;
}