强制div元素到顶部

Question

用于html和css的http://codepen.io/anon/pen/zqQJNM代码笔 我试图将项目的图片强制到角色图片的顶部或中间我不确定这是如何做到的任何帮助？我尝试过垂直对齐不同位置css是我最弱的区域，所以任何帮助都会非常感激！

#information{
background-color: CCFFFF;
border: groove;
width:100%;
height: 230px;
}

#summonerBox{
width: : 100px;
background-color: ;

}
#summonerInput{
width:200px;
height: 20px;
background-color: white;
}
.winBg{
background-color: green;
}
.loseBg{
background-color: red;
}
#itemList1{
position: inherit;
display: inline-block;
margin-left: 300px;
list-style-type: none;
vertical-align:top;


}
#itemlist2{
display: inline-block;
margin-left: 300px;
list-style-type: none;

}
#goldEarned{
list-style-type: none;


}
#gameType{
list-style-type: none;


}
#summonerGame{
list-style-type: none;

}

Answer 1

Use positioning for the element which you want to fix to top
//For left align
#itemList1{
 position:absolute;
 top:0;
 left:0;
}
//to fix it with respect to you device screen then just use {position:fixed;} instead.
//For center align first wrap all UL with any Divlike
<div class="wrapper">
  <ul>...</ul>
  <ul>...</ul>
  ..
</div>
//CSS..
.wrapper{
 position:absolute;
 top:0;
 left:50%;
 right:50%;
 width:300px;
 margin-left:-150px
}

This will make all <ul> at the center of the screen and it will be responsive.

Answer 2

尝试这个简单的解决方案：

#information{
    background-color: #CCFFFF;
    border: groove;
    width:100%;
    height: 230px;
    position: relative;
}

#summonerBox{
    width: 100px;
    background-color: ;
}

#summonerInput{
    width: 200px;
    height: 20px;
    background-color: white;
}

.winBg{
    background-color: green;
}

.loseBg{
    background-color: red;
}

#itemList1{
    margin-left: 100px;
    list-style-type: none;
    position: absolute;
    top: 0;
    left: 0;
}

#itemlist2{
    margin-left: 100px;
    list-style-type: none;
    position: absolute;
    top: 50px;
    left: 0;
}

#goldEarned{
    list-style-type: none;
}

#gameType{
    list-style-type: none;
}

#summonerGame{
    list-style-type: none;
}