html - How to allign 3 divs next to each other in the middle? -
i have 3 divs next each other, aren't nice alligned. leaning towards top instead of middle.
as can see, current 1 isn't alligned good.the paragraphs needs higher , on. may seem subtle thing, when open in different sizes of screens looks unorganized , messy.
so how make first picture ?
anyone got ideas ?
.capital { margin: 0px 0 -5px 0; line-height: 63px; font-size: 60px; font-weight: ligter; } .smalltext { text-align: center; margin-top: 0px !important; font-weight: 100px; font-size: 14px; } .container { float: left; margin: 0 auto; width: 100%; display: flex; } .left { width: 25%; margin: 05% 00% 00% 02%; } .imageleft { float: left; } .paragraphs { margin: 5% 00% 2% 00%; width: 50%; } .imageright { float: right; margin: 02% -10% 0% 00%; width: 300px; height: 200px; } .square { border-radius: 25px; background: #769dbd; padding: 20px; width: 100px; height: 100px; text-align: center; color: #fff; font-family: arial; padding-top: 10px; text-decoration: none; } * { box-sizing: border-box; }
<div class="container"> <div class="left"> <div id="methods" class="square"><span class="capital">m</span> <span class="smalltext">methods</span></div> </div> <div class="paragraphs"> lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem </div> <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" /> </div> <div class="container"> <div class="left"> <div id="motivation" class="square"><span class="capital">m</span> <span class="smalltext">motivation</span></div> </div> <div class="paragraphs"> lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem </div> <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" /> </div>
i use flexbox approach can vertically align children of container, comments in code:
.container { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; /* vertically aligns contents */ justify-content: space-between; margin-bottom: 20px; } .left { width: 25%; } .paragraphs { padding: 0 5%; /* space between cells */ flex-grow: 1; /* takes rest of space, best not use 50% in case 25% + 50% + 300px > 100% */ } .imageright { width: 300px; }
<div class="container"> <div class="left"> <div id="methods" class="square"><span class="capital">m</span> <span class="smalltext">methods</span></div> </div> <div class="paragraphs"> lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem </div> <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" /> </div> <div class="container"> <div class="left"> <div id="motivation" class="square"><span class="capital">m</span> <span class="smalltext">motivation</span></div> </div> <div class="paragraphs"> lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem </div> <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" /> </div>
Comments
Post a Comment