如何将icomoon图标保持在中间位置

Question

我想将icomoon图标icon-uniE610保留在中间，如图片

但我的方式让图标保持在顶部

图片下方 是我的方式

这是我的icomoon style.css

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?ktnun7');
    src:url('fonts/icomoon.eot?#iefixktnun7') format('embedded-opentype'),
        url('fonts/icomoon.woff?ktnun7') format('woff'),
        url('fonts/icomoon.ttf?ktnun7') format('truetype'),
        url('fonts/icomoon.svg?ktnun7#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
    content: "\e600";
}
.icon-users:before {
    content: "\e601";
}
.icon-lock:before {
    content: "\e602";
}
.icon-cogs:before {
    content: "\e603";
}
.icon-bubbles:before {
    content: "\e604";
}
.icon-pawn:before {
    content: "\e605";
}
.icon-box-add:before {
    content: "\e606";
}
.icon-signup:before {
    content: "\e607";
}
.icon-equalizer:before {
    content: "\e608";
}
.icon-bars:before {
    content: "\e609";
}
.icon-disk:before {
    content: "\e60a";
}
.icon-user:before {
    content: "\e60b";
}
.icon-stackoverflow:before {
    content: "\e60d";
}
.icon-store:before {
    content: "\e60e";
}
.icon-user2:before {
    content: "\e60c";
}
.icon-trash:before {
    content: "\e60f";
}
.icon-uniE610:before {
    content: "\e610";
    font-size:50px;
    color:black;
    vertical-align:middle;
}

这是我的HTML代码

<div class="container">
       <div class="row">
               <div class="col-md-6">
                   <img src="http://www.computerhope.com/logo.gif" alt="Logo"  class="round"/> user
               </div>
               <div class="col-md-6 ">Recently purchased
                       <div id="slideshow">
                               <span class="images">
                                       <div class="col-md-3"><div class="box">
                                               <img src="http://lorempixel.com/150/100/abstract" />
                                                       <span class="caption simple-caption">
                                                               <p>Review</p>
                                                       </span>
                                           </div></div>
                                       <div class="col-md-3"><div class="box">
                                               <img src="http://lorempixel.com/150/100/food" />
                                                       <span class="caption simple-caption">
                                                               <p>Review</p>
                                                       </span>
                                           </div></div>
                               </span>

                                       <a class="next icon-uniE610" href="#">Next</a>
                       </div>
               </div>
       </div>
</div>

这是fiddle

Answer 1

添加以下CSS，

.next {
height: 100%;
display: table-cell;
vertical-align: middle;
}

#slideshow{
    display:table;
}

这是 DEMO