无法在 div 中垂直对齐

Question

所以我在 div 中垂直对齐文本时遇到了一点问题。即使我认为它可能有效（如下例中的大方框），文本也太向下了。

为了查看示例，请全屏查看。

body
{
 font-family:Arial;
 font-size:10pt;
 color:white;
 background-color:#000856;
}
.clear
{
 clear:both;
}
#container
{
 padding-right:50px;
}
#container #siteHeader
{
 margin-top:40px;
}
#container #siteHeader .logo
{
 float:right;
}
#container #siteHeader .logoText
{
 float:right;
 font-weight:bold;
 font-size:25pt;
 padding-top:35px;
 padding-right:15px;
}
#container #siteBody
{
 
}
#container #siteBody .row
{
 margin-top:15px;
}
#container #siteBody .row .spacer
{
 width:20px;
 float:right;
}
#container #siteBody .row .block
{
 height:160px;
 text-align:center;
 font-size:25pt;
 font-weight:bold;
 float:right;
}
#container #siteBody .row .block span
{
 position:relative;
 top:50%;
 transform:translateY(-50%);
}
#container #siteBody .row .single
{
 width:160px;
}
#container #siteBody .row .double
{
 width:335px;
}
#container #siteBody .row .triple
{
 width:510px;
}
#container #siteBody .row .quad
{
 width:685px;
}
#container #siteBody .row .white
{
 background-color:white;
}
#container #siteBody .row .black-1
{
 background-color:black;
}
#container #siteBody .row .black-2
{
 background-color:#3b3e45;
}
#container #siteBody .row .green-1
{
 background-color:#00b159;
}
#container #siteBody .row .green-2
{
 background-color:#86aa26;
}
#container #siteBody .row .green-3
{
 background-color:#006054;
}
#container #siteBody .row .blue-1
{
 background-color:#00aedb;
}
#container #siteBody .row .blue-2
{
 background-color:#314e6c;
}
#container #siteBody .row .blue-3
{
 background-color:#44a5ac;
}
#container #siteBody .row .blue-4
{
 background-color:#297e83;
}
#container #siteBody .row .blue-5
{
 background-color:#034a8c;
}
#container #siteBody .row .blue-6
{
 background-color:#44a5ac;
}
#container #siteBody .row .blue-7
{
 background-color:#336797;
}
#container #siteBody .row .blue-8
{
 background-color:#0c5fa1;
}
#container #siteBody .row .blue-9
{
 background-color:#305b6e;
}
#container #siteBody .row .blue-10
{
 background-color:#00aaf0;
}
#container #siteBody .row .orange-1
{
 background-color:#f37735;
}
#container #siteBody .row .orange-2
{
 background-color:#b84e00;
}
#container #siteBody .row .orange-3
{
 background-color:#be4f3b;
}
#container #siteBody .row .pink-1
{
 background-color:#ec098c;
}
#container #siteBody .row .pink-2
{
 background-color:#f63150;
}
#container #siteBody .row .purple-1
{
 background-color:#7c4199;
}
#container #siteBody .row .purple-2
{
 background-color:#1d092c;
}
#container #siteBody .row .purple-3
{
 background-color:#640f6c;
}
#container #siteBody .row .red-1
{
 background-color:#d44032;
}
#container #siteBody .row .red-2
{
 background-color:#c9312c;
}
#container #siteBody .row .red-3
{
 background-color:#d11141;
}
#container #siteBody .row .red-4
{
 background-color:#ce0a0b;
}
#container #siteBody .row .yellow-1
{
 background-color:#ffc425;
}
#container #siteBody .row .yellow-2
{
 background-color:#e59b18;
}
#container #siteBody .row .yellow-3
{
 background-color:#e59a1a;
}
#container #siteBody .row .pointer
{
 cursor:pointer;
}
#container #siteBody .row .space
{
 margin-right:15px;
}

<!doctype html>
<html dir="rtl">
 <head>
  <meta charset="windows-1255" />
  <title>
   Gate 7 || שער 7
  </title>
  <link rel="stylesheet" type="text/css" href="./style/main.css" />
 </head>
 <body>
  <div id="container">
   <div id="siteBody">
    <div class="row">
     <div class="block single">
      <img src="./images/logo.png" />
     </div>
     <div class="block double" style="text-align:right;">
      שער 7
     </div>
     <div class="block single space">
      ימים
     </div>
     <div class="block single space">
      שעות
     </div>
     <div class="block single space">
      דקות
     </div>
     <div class="block single space">
      שניות
     </div>
     <div class="clear"></div>
    </div>
    <div class="row">
     <div class="block triple blue-1"><span>
      דגשדגשדג
     </span></div>
     <div class="block single green-1 space">
      10
     </div>
     <div class="block single blue-2 space">
      50
     </div>
     <div class="block single pink-2 space">
      2
     </div>
     <div class="block single yellow-1 space">
      158
     </div>
     <div class="clear"></div>
    </div>
    <div class="row">
     <div class="block single purple-1">
      
     </div>
     <div class="block single blue-2 space">
      
     </div>
     <div class="block single orange-1 space">
      
     </div>
     <div class="block single yellow-1 space">
      
     </div>
     <div class="block single blue-7 space">
      
     </div>
     <div class="block single green-1 space">
      
     </div>
     <div class="block single blue-3 space">
      
     </div>
     <div class="clear"></div>
    </div>
   </div>
  </div>
 </body>
</html>

底线：文本未与 div 的中间垂直对齐。

我可能尝试了此处建议的任何一种解决方案，但找不到它不起作用的原因。

请帮帮我！

Answer 1

你可以使用这个：

#container #siteBody .row .block {
  height: 160px;
  text-align: center;
  font-size: 25pt;
  font-weight: bold;
  float: right;
  line-height: 160px;
}

我也从 #container #siteBody .row .block span 中删除了 top:50%; transform:translateY(-50%); 技巧。

基本上，您将行高设置为与您的容器高度相同。

Answer 2

已更新 请将此行添加到您的 css

#container #siteBody .row .block
{
   display:table; 
}

#container #siteBody .row .block span {
  display: table-cell;
  position: relative;
  vertical-align: middle;
}

这是有效的解决方案，即使您在 div 中的文字会增加，它也会起作用..很抱歉最后的快速回答..ty

Answer 3

看到你有以下CSS代码-

#container #siteBody .row .block
{
    height:160px;
    text-align:center;
    font-size:25pt;
    font-weight:bold;
    float:right;
}
#container #siteBody .row .block span
{
    position:relative;
    top:50%;
    transform:translateY(-50%);
}

您只需要对原始代码稍作改动 -

#container #siteBody .row .block
{
    height:160px;
    text-align:center;
    font-size:25pt;
    font-weight:bold;
    float:right;
    position: relative; /* ADDED THIS LINE  */
}
#container #siteBody .row .block span
{
    position:absolute;  /* CHANGED THIS VALUE  */
    top:50%;
    left: 50%;          /* ADDED THIS LINE  */
    transform:translate(-50%, -50%);  /*CHANGED THIS VALUE  */
}

无法在 div 中垂直对齐

Can't vertically-align in a div

html

css

vertical-alignment