html - Divs with variable text length alignment and centering issues -


i'm trying to:

  1. center 2 divs on page

  2. 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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -