html - div中的中间对齐图标+文本

Question

我需要在一个方形链接中垂直居中放置一个图标和下面的文本。

这里是例子:

HTML:

<div id="button1">
  <a href="#" class="btn btn-sq-lg btn-primary">
    <i class="fa fa-user fa-5x"></i>
    <br/>Demo Primary <br />Button
  </a>
</div>

CSS

.btn-sq-lg 
{
   width: 200px;
   height: 200px;
   text-align: center;
   vertical-align: middle;
}

这里 fiddle :https://jsfiddle.net/fabioravizzotti/hutmay1r/3/

我需要图标和文本在正方形中居中。

我尝试了很多解决方案:vertical-align、line-height 但它们都不起作用。

Answer 1

你可以使用 Flexbox ，如以下代码段所示。不要忘记根据需要为 Flexbox 属性添加前缀。

注意:.btn 类仅在选择器中需要，如果 Bootsrap 文件包含在您的 HTML 之后您自己的样式表中。

.btn.btn-sq-lg{
    align-items:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:200px;
    height:200px;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="button1">
    <a href="#" class="btn btn-sq-lg btn-primary">
        <i class="fa fa-user fa-5x"></i>
        <br>Demo Primary<br>Button
    </a>
</div>

顺便说一下，如果你愿意，你可以只用一个标签来实现这一点，就像这样:

#button1{
    background:#337ab7;
    border:1px solid #2e6da4;
    border-radius:4px;
    box-sizing:border-box;
    align-items:center;
    color:#fff;
    display:flex;
    flex-direction:column;
    font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size:14px;
    justify-content:center;
    line-height:20px;
    padding:6px 12px;
    text-align:center;
    text-decoration:none;
    width:200px;
    height:200px;
}
#button1::before{
    content:"\f007";
    display:block;
    font-family:FontAwesome;
    font-size:5em;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    font-style:normal;
    font-weight:normal;
    line-height:1;
    margin:0 0 20px;
}
#button1:active,#button1:hover{
    background:#286090;
    border-color:#204d74;
}
#button1:focus{
    background:#204d74;
    border-color:#122b40;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<a id="button1" href="#">Demo Primary Button</a>