将锚点标签内的内容居中对齐

Question

我需要帮助垂直对齐锚点内的内容。我正在使用字体awesome图标和锚点标签内的文本。我想让图标和文本在中心垂直水平对齐。我已经成功实现了水平对齐，但是垂直对齐无法实现。不确定我漏掉了什么。

.my-tile {
    height: 90px;
    margin-left: 0.5%;
    margin-right: 0.5%;
    float: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    /*display: table;*/
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;    
    position: relative;    
    align-items: center;
    background: linear-gradient(#af4b17, #e57234); /* Standard syntax */
    background: -moz-linear-gradient(#af4b17, #e57234 35%, #e57234);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #af4b17),color-stop(.35, #e57234),color-stop(1, #e57234));
    border: 1px solid #af4b17;
    text-align: center;
    justify-content: center;
    vertical-align:middle;
}

    .my-tile > a {
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        /*padding-bottom: 10px;*/
        text-decoration: none;
        position: relative;           
        vertical-align:middle;        
    }

        .my-tile > a .link-icon {
            color: white !important;
            font-size: 30px !important;            
            height: 1em;
            margin: 0 auto 5px;            
            width: 1em;            
            display: block;
            
        }        

.my-tile-half {
    width: 49%;
}

<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="row">
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-12">                        
                        <div class="my-tile my-tile-half">
                            <a href="#">
                                <div>
                                    <span class="fas fa-upload link-icon"></span>Upload
                                </div>
                            </a>
                        </div>
                        <div class="my-tile my-tile-half">
                            <a href="#">
                                <div>
                                    <span class="fas fa-clipboard-check link-icon"></span>Done
                                </div>
                            </a>
                        </div>
                    </div>
                </div>                
            </div>
        </div>

- LP13

---

你能添加一张图片来说明你想要的效果吗？也许你想要两个项目并排放置在中间。 - Friday Ameh

Answer 1

最好的方法是使用FLEX来对<a></a>内部的所有内容进行对齐。

a {
    display: flex;
    align-items: center;
    justify-content: center;

    /** Use this rule if the tag has a parent with specific height */ 
    height: 100%; 
}

请查看此演示：https://jsfiddle.net/gkL5of1z/3/

- The.Bear