Question

我试图在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>

Answer 1

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

如果你想从左边增加保证金，则跟随css的变化：

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

<强> Fiddle

修改

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

＆＃13;
＆＃13;
.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; }
＆＃13;
<!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>
＆＃13;
＆＃13;
＆＃13;

Answer 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

Answer 3

请查看以下代码，它可能会对您有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

＆＃13;

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

＆＃13;

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

＆＃13;

或

＆＃13;

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

＆＃13;

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

＆＃13;

在父div的中心对齐跨度中的文本和图标字体图标

4 个答案: