i´m working on css exercise in have make letter align in boxes inside different tags. i´m struggling in aligning letter vertically, i´ve tried vertical-align:middle. not work
here´s code:
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title>hola</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <div id="a" class="cuadrado">a</div> <span id="b" class="cuadrado">b</span> <p id="c" class="cuadrado">c</p> <h1 id="d" class="cuadrado">d</h1> <h2 id="e" class="cuadrado">e</h2> <p id="f" class="cuadrado">f</p> <p id="g" class="cuadrado">g</p> </div> </body> </html> css:
.main{ position: absolute; bottom: 0; left: 0; } .cuadrado{ /*display: block;*/ width: 30px; height: 30px; color:white; font-size: 16px; display:inline-block; border-width: 2px; border-style: solid; border-color: black; text-align: center; vertical-align: middle; } #a{ background: red; position: relative; top: 50%; transform: translatey(-50%); } #b{ background: orange; } #c{ background: yellow; } #d{ background: black; } #e{ background: green; } #f{ background: blue; } #g{ background: purple; }
there's great codepen answering question here: http://codepen.io/chriscoyier/pen/lpema
body { background: #f06d06; font-size: 80%; } main { background: white; height: 300px; margin: 20px; width: 300px; position: relative; resize: vertical; overflow: auto; } main div { position: absolute; top: 50%; left: 20px; right: 20px; background: black; color: white; padding: 20px; transform: translatey(-50%); resize: vertical; overflow: auto; }<main> <div> i'm block-level element unknown height, centered vertically within parent. </div> </main>your .main element needs relatively positioned one, , 1 inside abolute. follow code above , should work.
Comments
Post a Comment