html - Center link in an unordered list element (flexbox) -


i've been playing around flex box , center "logo" test in upper left corner vertically in blue container.

you can see here: http://codepen.io/timros/pen/mwkngw

* {     margin: 0;     padding: 0; } .box {     color: white;     font-size: 80px;     text-align: center;     text-shadow: 4px 4px 3px black; }   /* colors & style ===================================== */  .main-header    {   background: #e3e3e3;    } .main-footer    {   background: #e3e3e3;    } .main-content   {   background: #e3e3e3;    }  .main-wrapper {     box-shadow: 2px 2px 10px #333; }   .main-wrapper {     width: 80%;     margin: 0 auto; }  /* head ===================================== */  .main-header {     width: 100%;     height: 100px;     border-bottom: 1px solid black; }  .main-nav {     list-style: none;     display: flex;     flex-flow: row wrap;     justify-content: flex-end;     align-items: flex-end;     height: 100%;  }  .main-nav li {     margin-left: 8px;     margin-right: 8px; }  #logo {     margin-right: auto; /* align logo left, nav right*/     margin-left: 0;     align-self: center; }  .main-nav li:last-child {     margin-right: 0; }  .main-nav li {     background-color: #3f8abf;     border-top-left-radius: 5px;     border-top-right-radius: 5px;     border-bottom: 4px solid firebrick;   } .main-nav {     text-decoration: none;     color: white;     text-align: center;     font-weight: bold;     padding: 8px 15px;     display: block;     width: 100px; }  #logo {     border-top-left-radius: 0;     border-bottom-right-radius: 5px;     border-bottom: 0;     border-left: 4px solid firebrick;     padding: 0;     height: 100%;  }  #logo h1 {     padding: 0;     margin: 0; }   /* content ===================================== */  .main-content {     padding: 15px; } h3 {     margin-bottom: 15px; }  /* footer ===================================== */  .main-footer {     border-top: 1px solid black;     text-align: center;     padding: 5px; }

i tried margin , padding auto doesnt seem work, please help!

just add css:

css

#logo a{   position: relative;   top: 50%;   left: 50%;   transform: translate(-50%,-50%);   -webkit-transform: translate(-50%,-50%); // safari , chrome mobile }

demo here


Comments

Post a Comment

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

i working latest mpandroidchart library , looking way add annotations or images clickable. example: once data reaches value event occurs want able display user - there multiple events can occur annotations (not sure if right word) or image added @ point in chart. any pointers welcome. check documentation of yaxis . focus on setspacetop(...) , setaxismaxvalue(...) methods. for background: bar-shadow , disable calling: barchart.setdrawbarshadow(false) or change color: bardataset.setbarshadowcolor(int color)
Read more

javascript - Add class to another page attribute using URL id - Jquery -

i have attached id url. ex: when click link 1 , has #tab-2 id , takes me landing page. in landing page have find element has #tab-2 id have add class .active . i tried no luck. please 1 correct code. thanks js fiddle link html <div class="menu"> <ul> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-2">link 1</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-44">link 2</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-74">link 3</a></li> </ul> </div> landing page <div class="tab"> <ul> <li><a id="tab-2" class="active" >link 1 content</a></li> <li><a id="tab-44" >link 2 content</a></li> <li><a id="tab-74" >link 3 content</a></l...
Read more

firefox - Where is 'webgl.osmesalib' parameter? -

i'm trying webgl running on firefox (v37.0.2) via software acceleration mesa. tried following steps have been stated in article: http://www.binarytides.com/enable-webgl-firefox-ubuntu/ however, unable find parameter named ' webgl.osmesalib ' in about:config section? has been removed (or renamed)? if yes, how should instruct firefox use mesa's software acceleration webgl? looks support osmesa removed in favour llvmpipe.
Read more