![](/img/trans.png)
[英]How can I vertically align a <table> in the middle of a fixed height <div>?
[英]How to align content of div vertically middle, when height is unknown?
這是我的構造:
<div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/ack2.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/anger.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/angryfire.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/angrytalk.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/banghead.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/banplz.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/bonk.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/bow.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/clap.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/crash.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/crazya.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/crybaby2.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/cussing.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/director.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/dontknow.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/doubt.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/drunken_smilie.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/duhos2.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/dumcsi.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/eplus2.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/faceplant.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/fejvakaras.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/fiesta.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/fplasma.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/fsniper.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/fxloc.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/happy.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/icon_arrow.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_biggrin.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/icon_confused.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/icon_cool.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/icon_evil.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_exclaim.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/icon_eyes.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/icon_idea.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/icon_lol.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_mad.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/icon_mrgreen.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/icon_neutral.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/icon_question.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_razz.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/icon_sad.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/icon_smile.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/icon_surprised.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_thumleft.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/icon_thumright.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/icon_twisted.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/icon_wink.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/indifferent.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/kacsint.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/kerdes.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/laughing-smiley-007.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/laughing1.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/laughing6.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/laughing7.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/levele.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/notworthy.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/occasion14.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/party-smiley-012.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/party-smiley-014.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/party-smiley-036.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/PDT_Armataz_01_37.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/phone.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/popcorn.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/rinya.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/s-shock.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/s-telefrag.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/sad3.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/schmoll2.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/shakehead.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/sign13.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/sign16.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/sir.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/sleepy1.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/smile11.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/smile13.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/smile26.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/smile36.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/smile41.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/smile9.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/smiley-chores028.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/smiley-gen042.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/smiley-scared002.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/smoke.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/tongue3.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/toothy9.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/umm.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/vigyor2.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/vigyor5.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/violent.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/violent1.gif"></div>
</div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/walking.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/whatever.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/wilting.gif"></div>
<div class="shoutbox_smileTable"><img src="/assets/smiles/wtf.gif"></div>
</div>
#SBSMILES
{
overflow-x: hidden;
overflow-y: scroll;
}
.shoutbox_smileTable
{
float: left;
width: 25%;
text-align: center;
padding-bottom: 100%;
margin: 0 -1px -100% -1px;
background-color: white;
border: 1px solid black;
}
.shoutbox_smileTable img
{
}
.shoutbox_smileTableContainer
{
overflow: hidden;
}
[ https://jsfiddle.net/ccb4q4uu/][1]
如您所見,圖像的高度各不相同,但我希望它們都在中間。 怎么做?
如何使其更加簡單並與舊版瀏覽器兼容?
這是您可能要實現的目標的我的版本; 具有更少的代碼和更好的可見性(我希望)。 看到自己(全屏),它也很敏感!
*, *:before, *:after { box-sizing: border-box; } .shoutbox_smileTable { text-align: center; background-color: white; border: 1px solid black; border-width: 0 0 1px; height: 50px; } .shoutbox_smileTable img { position: relative; top: 50%; transform: translateY(-50%); } @media only screen and (min-width: 768px) { .shoutbox_smileTable { float: left; border-width: 0 1px 1px 0; } } @media only screen and (max-width: 1024px) and (min-width: 768px) { .shoutbox_smileTable { width: 50%; } .shoutbox_smileTable:nth-child(2n) { border-right-width: 0; } } @media only screen and (min-width: 1024px) { .shoutbox_smileTable { width: 25%; } .shoutbox_smileTable:nth-child(4n) { border-right-width: 0; } }
<base href="http://www.normalnonoobs.com" target="_blank"> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/ack2.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/anger.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/angryfire.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/angrytalk.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/banghead.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/banplz.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/bonk.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/bow.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/clap.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/crash.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/crazya.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/crybaby2.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/cussing.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/director.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/dontknow.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/doubt.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/drunken_smilie.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/duhos2.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/dumcsi.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/eplus2.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/faceplant.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/fejvakaras.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/fiesta.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/fplasma.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/fsniper.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/fxloc.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/happy.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_arrow.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_biggrin.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_confused.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_cool.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_evil.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_exclaim.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_eyes.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_idea.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_lol.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_mad.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_mrgreen.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_neutral.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_question.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_razz.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_sad.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_smile.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_surprised.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_thumleft.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_thumright.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_twisted.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_wink.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/indifferent.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/kacsint.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/kerdes.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/laughing-smiley-007.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/laughing.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/laughing1.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/laughing6.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/laughing7.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/levele.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/notworthy.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/occasion14.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/party-smiley-012.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/party-smiley-014.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/party-smiley-036.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/PDT_Armataz_01_37.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/phone.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/popcorn.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/rinya.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/s-shock.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/s-telefrag.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/sad3.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/schmoll2.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/shakehead.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/sign13.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/sign16.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/sir.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/sleepy1.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smile11.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smile13.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smile26.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smile36.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smile41.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smile9.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smiley-chores028.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smiley-gen042.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smiley-scared002.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smoke.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/tongue3.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/toothy9.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/umm.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/vigyor2.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/vigyor5.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/violent.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/violent1.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/walking.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/whatever.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/wilting.gif"></div> <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/wtf.gif"></div> </div>
希望對您有所幫助。
您可以將其更改為flex
布局,使用起來會容易得多。
添加display: flex
到行( .shoutbox_smileTableContainer
)。 然后,使單元格( .shoutbox_smileTable
) display: flex
並添加align-items: center
以垂直對齊內容,然后justify-content: center
以水平對齊。
#SBSMILES { overflow-x: hidden; overflow-y: scroll; } .shoutbox_smileTable { width: 25%; padding-bottom: 100%; margin: 0 -1px -100% -1px; background-color: white; border: 1px solid black; display: flex; justify-content: center; align-items: center; } .shoutbox_smileTableContainer { display: flex; }
<base href="http://www.normalnonoobs.com" target="_blank"> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/ack2.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/anger.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/angryfire.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/angrytalk.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/banghead.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/banplz.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/bonk.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/bow.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/clap.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/crash.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/crazya.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/crybaby2.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/cussing.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/director.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/dontknow.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/doubt.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/drunken_smilie.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/duhos2.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/dumcsi.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/eplus2.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/faceplant.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/fejvakaras.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/fiesta.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/fplasma.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/fsniper.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/fxloc.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/happy.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_arrow.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_biggrin.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_confused.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_cool.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_evil.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_exclaim.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_eyes.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_idea.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_lol.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_mad.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_mrgreen.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_neutral.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_question.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_razz.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_sad.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_smile.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_surprised.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_thumleft.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_thumright.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_twisted.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_wink.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/indifferent.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/kacsint.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/kerdes.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing-smiley-007.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing1.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing6.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing7.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/levele.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/notworthy.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/occasion14.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/party-smiley-012.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/party-smiley-014.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/party-smiley-036.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/PDT_Armataz_01_37.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/phone.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/popcorn.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/rinya.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/s-shock.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/s-telefrag.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/sad3.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/schmoll2.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/shakehead.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/sign13.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/sign16.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/sir.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/sleepy1.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/smile11.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/smile13.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/smile26.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/smile36.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/smile41.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/smile9.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/smiley-chores028.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/smiley-gen042.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/smiley-scared002.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/smoke.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/tongue3.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/toothy9.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/umm.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/vigyor2.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/vigyor5.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/violent.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/violent1.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/walking.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/whatever.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/wilting.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/wtf.gif"></div> </div>
使用height: 100%
且vertical-align: middle
inline-block
幫助器。 據我所知,這是最好的跨瀏覽器解決方案。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.