html - css vertical and horizontal alignment issues -


i'd align menu items , logo-picture both horizontally , vertically in red div. how achieve that? i've tried set margin left , right auto vertical-align center, didn't work. help

see: http://jsfiddle.net/gm2wzl6z/

enter image description here

html:

<div id="nav-container">     <nav>         <ul id="navlist">             <li id="active"><a href="#" id="current">item one</a>             </li>             <li><a href="#">item two</a>             </li>             <li><a href="#">item three</a>             </li>             <li>                 <img src="http://lorempixel.com/output/fashion-q-g-227-148-4.jpg">             </li>             <li><a href="#">item four</a>             </li>             <li><a href="#">item five</a>             </li>         </ul>     </nav> </div> 

css:

#nav-container {     height: 300px;     background: red; } #navlist li {     display: inline;     list-style-type: none;     padding-right: 20px; } 

use display:table/table-cell vertical-align:

#nav-container {      height: 300px;      background: red;      display:table;      width:100%;  }  #nav-container nav{      display: table-cell;      height: 300px;      vertical-align: middle;      text-align:center;  }    #nav-container nav li{      display:inline-block;      vertical-align: middle;  }
<div id="nav-container">      <nav>          <ul id="navlist">              <li id="active"><a href="#" id="current">item one</a>              </li>              <li><a href="#">item two</a>              </li>              <li><a href="#">item three</a>              </li>              <li>                  <img src="http://lorempixel.com/output/fashion-q-g-227-148-4.jpg">              </li>              <li><a href="#">item four</a>              </li>              <li><a href="#">item five</a>              </li>          </ul>      </nav>  </div>

jsfiddle


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -