力div元素頂端

Question

http://codepen.io/anon/pen/zqQJNM代碼筆HTML和CSS 我想要的物品的圖片強制頂部或人物的圖片我真的不知道這是怎麼中間做了什麼幫助？我曾嘗試垂直對齊不同的位置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; 
}