代码之家 › 专栏 › 技术社区 › LP13

在中心对齐定位标记内的内容

font-awesome css twitter-bootstrap

LP13 · 技术社区 · 6 年前

我需要帮助使锚内的内容垂直对齐。我正在使用字体可怕的图标和锚标签内的文本。我想要垂直显示图标和文本(&在中心水平对齐。我能够进行水平对齐,但无法进行垂直对齐。不知道我错过了什么

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

1 回复 | 直到 6 年前

The.Bear 3 年前

对齐内部所有内容的最佳方法 <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/