Centering flexbox items

I'm trying to center the content within my flexboxes but whatever I try seems to not work.

such as:

align-items: center;
-moz-align-items: center;
-ms-flex-align: center;
-webkit-align-items: center;

justify-content: center;
-moz-justify-content: center;
-ms-flex-pack: center;
-webkit-justify-content: center;

This is the template we've been trying to align the flex content: http://codepen.io/anon/pen/idzDE

you'll see all the links labelled box# we've been trying to center in the flex boxes and have yet to get it to work.

---

You have to set your .right li as flexbox as well.

.right li {
    box-sizing:border-box;
    border:1px solid white;
    text-align:center;     
    flex:1;
    display:flex; //flexbox
    align-items: center; //center ver.
    justify-content: space-around; //center hor.
}

UPDATED

---

change your CSS to this:

/* Fonts */

/* Regular */
@font-face {
    font-family: 'League Gothic';
    src: url('fonts/leaguegothic-regular-webfont.eot');
    src: url('fonts/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/leaguegothic-regular-webfont.woff') format('woff'),
        url('fonts/leaguegothic-regular-webfont.ttf') format('truetype'),
        url('fonts/leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



html{
    height:100%;
    width:100%;
}
*{
text-decoration:none;
    list-style:none;
}
body{
    margin:0;
    height:100%;
    width:100%;
    display:flex;
    background:yellow;

}

nav,header a{
font-family:'League Gothic';
    font-size:1em;
    color:white;
}

.left{
    display:flex;
    flex-direction:column;
    background:orange;
    width:10%;
}

.left ul{
    padding:0;
    margin:0;
    display:flex;
    flex:1;
    flex-direction:column;



}

.left li{
    box-sizing:border-box;
    border:1px solid white;
    text-align:center;
   flex:1;
  margin: auto;  
}

.left a{
    color:white;


}



.toolBar{
    background:steelblue;
    height:50%;
}

.content{
    background:mediumseagreen;
    width:100%;
    overflow:scroll;
    overflow-x: auto;

}

.right{
    display:flex;
    background:orangered;
    margin-left:auto;
    height:100%;
    width:10%;
}

.right ul {
    padding:0;
    margin:0;
    display:flex;
    flex:1;
    flex-direction:column;

}

.right li {
  margin: auto;
    box-sizing:border-box;
    border:1px solid white;
    text-align:center;
    padding:10%

}

.right a {
 color:white;
    display:inline-block;
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg);

}
.topnav-toolbar{
    width:100%;
    height:10%;
}

.topnav-toolbar ul{
    display:flex;
    flex-direction:row;
    padding:0;
    margin:0;
    height:100%;


}

.topnav-toolbar li {
    box-sizing:border-box;
    border:1px solid white;
    text-align:center;
    width:100%;
    margin: auto;

}

.topnav{  
    background:mediumspringgreen;
    height:50%;
}


.right-content-topnav-toolbar{
    height:100%;
    width:100%;

}

.right-content{
    display:flex;
    width:100%;
    height:90%;
    flex-direction:row;
}

Codepen here

链接地址: http://www.djcxy.com/p/76036.html

上一篇: FlexCit自动边距不适用于对齐

下一篇: 居中flexbox项目