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

这里小提琴：https://jsfiddle.net/fabioravizzotti/hutmay1r/3/

我需要将图标和文字置于正方形的中心。

我尝试了很多解决方案：vertical-align，line-height，但他们没有工作。

Answer 1

您可以使用Flexbox，如下面的代码段所示。不要忘记在必要时为Flexbox属性添加前缀。

注意：只有在您自己的样式表后，您的HTML 中包含Bootsrap文件才能在选择器中使用.btn类。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

顺便说一下，如果您愿意，只需一个标签即可实现此目的，如下所示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

vertical-align不起作用的原因是因为它是一个复杂的对象（两个元素）。你需要做定位。我添加了一个额外的<span>标签用于包含它们并使用定位，我修复了它：

.btn-sq-lg {
  width: 200px;
  height: 200px;
  text-align: center;
}
#button1 a {
  position: relative;
  display: block;
}
#button1 a span {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

<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">
    <span>
      <i class="fa fa-user fa-5x"></i>
      <br/>Demo Primary
      <br />Button
    </span>
  </a>
</div>

无论分辨率或高度如何，<span>都会在<a>标记内垂直和水平居中。请参阅下面的更长文本：

.btn-sq-lg {
  width: 200px;
  height: 200px;
  text-align: center;
}
#button1 a {
  position: relative;
  display: block;
}
#button1 a span {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

<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">
    <span>
      <i class="fa fa-user fa-5x"></i>
      <br/>Demo Primary
      <br />Button
      <br />Line
    </span>
  </a>
</div>

Answer 3

解决方案

<i class="fa fa-user fa-5x" style="margin-top: 31px;"></i>