Question

HTML：

<th class="someCSS">Text</th>

CSS：

.someCSS {
    vertical-align: middle;
}

此代码无效。它没有垂直对齐元素。我该怎么做？

Answer 1

在这种情况下，我认为你必须使用flexbox 因为你的文字可以是一个单词或500，它将始终保持在页面的中间

你在你的文字周围放了一个div然后你做了我发布的内容

body{
 margin:0px;
 }

.test{
display:flex;

/*justify-content:center;*//*to put in the center of the screen*/

align-items:center;
width:100%;
height:100vh;
}

<div class="test">
<th class="someCSS">Text</th>
</div>

Answer 2

您可以使用css calc()函数计算出包含元素的中心点，然后减去想要居中的元素高度的一半。

.container {
  height: 100vh;
}
.element-to-align{
  position: relative;
  top: calc(50% - 50px);
  height:100px;
  width: 100px;
}



<body>
 <div class="container">
  <div class="element-to-align"></div>
 </div> 
</body>

以下完整代码：

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .container {
   height: 100vh;
 }
 .element-to-align{
   position: relative;
   top: calc(50% - 50px);
   height:100px;
   width: 100px;
   border: red dotted 1px;
 }
</style>
</head>
<body>
 <div class="container">
   <div class="element-to-align"></div>
 </div> 
</body>
</html>

如何将HTML元素垂直对齐？

2 个答案: