Question

这是我的结构：

        <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]

正如你所看到的，图像有各种各样的高度，但我希望它们都在中间。怎么做？

Answer 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>

我希望它有所帮助。

Answer 2

您可以将其更改为__init__布局，这将更容易使用。

将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;
}

Answer 3

将inline-block帮助与height: 100%和vertical-align: middle一起使用。据我所知，这是最好的跨浏览器解决方案。

当高度未知时，如何将div的内容垂直对齐？

3 个答案: