I'm trying to:
center two divs on the page
while keeping them inline
I can accomplish one but then the other does not work due to their differing text lengths. If I center the divs, they are out of line with one another(staggered as shown on http://willhay.io/about). I can fix this issue by floating them left, but then they are not centered. How can I both center the divs while keeping them inline with each other while they have variable text lengths?
<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>
CSS
.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;
}
Use
vertical-align: top;
on aboutBox divs