在父 div 的中心对齐 span 中的文本和图标字体图标答案

【问题标题】：Align text and icon-font icon in span at center of parent div在父 div 的中心对齐 span 中的文本和图标字体图标
【发布时间】：2016-03-02 09:31:20
【问题描述】：

我正在尝试对齐 div 容器内 <span> 标记中的一些文本。文本应位于容器的垂直中心，距左边框几个像素。到左边的距离没什么大不了，但我怎样才能把我的文字放在他父母<div>容器的垂直中心？

.container{
  border: 1px solid red;
  height: 50px;
  width: 100px;
  }

.container-content{
  height: 40px;
  border: none;
  border-left: 1px solid black;
  border-right: 1px solid black;
  margin-top: 5px;
  margin-left: 3px;
  margin-right: 3px;
  }

.container-content span{
  margin-left: 2px; 

  }

<div class="container">
  <div class="container-content">
    <span>Text<span>  
  </div>
</div>

编辑

所有建议的答案都适用于文本，但如果我使用图标字体，则图标不会放在中心。如何用 googles material-icon 字体解决这个问题？

.container {
  border: 1px solid red;
  height: 50px;
  width: 100px;
}
.container-content {
  height: 40px;
  border: none;
  border-left: 1px solid black;
  border-right: 1px solid black;
  margin-top: 5px;
  margin-left: 3px;
  margin-right: 3px;
  display: flex;
  align-items: center;
}
.container-content span {
  margin-left: 5px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="container-content">
      <span><span><i class="material-icons">check_circle</i><span>  
      </div>
    </div>
  </body>

</html>

【问题讨论】：

标签： html css

【解决方案1】：

只需将display: flex; 和align-items: center; 添加到.container-content 即可使您的文本在容器内垂直居中。

如果您想从左侧增加边距，请更改以下 css：

.container-content span {
    margin-left: 5px;
}

Fiddle

编辑：

只需从图标中删除line-height，否则一切正常。是展示中心。

.container {
  border: 1px solid red;
  height: 50px;
  width: 100px;
  display: flex;
  align-items: center;
}
.container-content {
  height: 40px;
  border: none;
  border-left: 1px solid black;
  border-right: 1px solid black;
  margin-left: 3px;
  margin-right: 3px;
  display: flex;
  align-items: center;
  width:100%;
}
.container-content span {
  margin-left: 5px;
}

.material-icons{
  line-height:unset !important;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="container-content">
      <span><span><i class="material-icons">check_circle</i><span>  
      </div>
    </div>
  </body>

</html>

【讨论】：

您的回答对我帮助很大，但现在我遇到了图标字体的问题。你也知道这个问题的解决方案吗？请看我的编辑
@JohnDizzle 好的。让我检查一下
但它真的是中心吗？我认为它有点过中心。有没有办法用填充或其他东西垂直移动图标来满足我的 tic ;-)
@JohnDizzle 是的。它在中心。 i.stack.imgur.com/eqErG.png。您可以更改跨度的填充和边距
也许正确验证 HTML 关闭跨度是个好主意？

【解决方案2】：

将line-height: 40px; 添加到.container-content（如果 span 有多行，这将无用。）

.container-content{
  line-height: 40px;
  border: none;
  border-left: 1px solid black;
  border-right: 1px solid black;
  margin-top: 5px;
  margin-left: 3px;
  margin-right: 3px;
  }

Demo

【讨论】：

【解决方案3】：

检查下面的代码，它可能会对您有所帮助。

.container{
  border: 1px solid red;
  height: 50px;
  width: 100px;
  }

.container-content{
  height: 40px;
  border: none;
  border-left: 1px solid black;
  border-right: 1px solid black;
  margin-top: 5px;
  margin-left: 3px;
  margin-right: 3px;
  align-items: center;
  display: flex;
  }

.container-content span{
  margin-left: 2px; 

  }

<div class="container">
  <div class="container-content">
    <span>Text</span>  
  </div>
</div>

【讨论】：

【解决方案4】：

我通过显示看到了 2 个简单的选项：

.container {
  height:50px;
  width:100px;
  box-sizing:border-box;
  border:solid;
  display:flex;
  padding:5px 3px;
  }
.container-content {
  margin:auto ;
  text-align:center;
  width:100%;
  padding:0 2px;
  border-left: 1px solid black;
  border-right: 1px solid black;
  }

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="container-content">
    <span><span><i class="material-icons">check_circle</i></span> </span>  
  </div>
</div>

或

.container {
  height: 50px;
  width: 200px;
  border: solid;
  display: table;
  border-spacing: 3px 5px;
}
.container-content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="container-content">
    <span><span><i class="material-icons">check_circle</i></span> </span>  
  </div>
</div>

【讨论】：