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

Question

我需要在正方形中垂直居中 link 下面是一个图标和一段文字。

这里是例子：

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

解决方案

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

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

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

注意： 只有当 HTML [=34] 中包含 Bootsrap 文件时，选择器中才需要 .btn class =]在你自己的样式表之后。

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

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

Middle alignment icon+text in a div

html

css

font-awesome