无法在div中垂直对齐

Question

So I have a little problem with vertically aligning text inside a div. 所以我在div内垂直对齐文本有一点问题。 Even when I thought it might work (like in the big box in the example below), the text goes too much down. 即使当我认为它可能会起作用时（如下面示例中的大框所示），文本也变得太多了。

In order to view the example, please view it in full screen. 为了查看示例，请全屏查看。

 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>

Bottom line: the text isn't vertically aligned to the middle of the div. 底线：文本未垂直对齐到div的中间。

I tried possibly any kind of solution suggested here, and couldn't find why it doesn't work. 我尝试了这里建议的任何一种解决方案，但找不到为什么它不起作用。

Please help me! 请帮我！

Answer 1

UPDATED Please add this lines in your css 更新请在您的css中添加此行

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

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

this is the working solution even if your text in div will be increase, it will work..sorry for last quick answer..ty 即使您增加div中的文本，这也是有效的解决方案。对不起，最后一个快速答案..ty

Answer 2

You can use this: 您可以使用此：

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

I've removed the top:50%; transform:translateY(-50%); 我删除了top:50%; transform:translateY(-50%); top:50%; transform:translateY(-50%); trick as well from #container #siteBody .row .block span . #container #siteBody .row .block span技巧。

Basically you set the line height the same height as your container. 基本上，将行高设置为与容器相同的高度。

Answer 3

See you have the following CSS code - 看到您有以下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%);
}

You just need a little changes to your original code - 您只需要对原始代码进行一些更改-

#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中垂直对齐

问题描述

3 个解决方案

解决方案1
3 已采纳 2015-07-20 10:43:49

解决方案2
1 2015-07-20 10:43:41

解决方案3
0 2015-07-20 11:05:14

无法在div中垂直对齐

问题描述

3 个解决方案

解决方案1 3 已采纳 2015-07-20 10:43:49

解决方案2 1 2015-07-20 10:43:41

解决方案3 0 2015-07-20 11:05:14

解决方案1
3 已采纳 2015-07-20 10:43:49

解决方案2
1 2015-07-20 10:43:41

解决方案3
0 2015-07-20 11:05:14