html - Divs with variable text length alignment and centering issues -
i'm trying to:
center 2 divs on page
while keeping them inline
i can accomplish 1 other not work due differing text lengths. if center divs, out of line 1 another(staggered shown on http://willhay.io/about). can fix issue floating them left, not centered. how can both center divs while keeping them inline each other while have variable text lengths?
<div class="bigbox"> <div class="aboutbox"> <img class="icon" src="../img/location.png" width="100" height="100"> <p>i born , raised in atlanta, ga, dreams of moving california. , heart, skills, art</p> </div> <div class="aboutbox"> <img class="icon" src="../img/music.png" width="100" height="100"> <p> love types of music, , after watching guardians of galaxy, gained new appreciation 70's music. follow spotify playlist, or listen 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
Comments
Post a Comment