不能在div中垂直對齊

因此，我在垂直對齊div內的文本時遇到了一些問題。即使當我認爲它可能工作時（例如下面例子中的大框），文本就會變得太過分了。不能在div中垂直對齊

要查看示例，請全屏查看。

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

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

底線：文本不垂直對齊到div的中間。

我試過可能在這裏提出的任何一種解決方案，並且找不到爲什麼它不起作用。

請幫幫我！

來源

2015-07-20 Daniel

修訂請在你的CSS

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

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

這是即使你在格文本將增加工作液添加此行，將work..sorry去年快速answer..ty

來源

2015-07-20 10:43:49

對不起，但我忘了告訴你刪除頂部：50％，但仍尋找更好的解決方案，並很快將更新我的答案..這個答案只是快速的答案。 .hope我會找到更好的.. –

好吧，新的工作！ – Daniel

如果他對桌子很好，這是一個很好的解決方案。您可以輕鬆地垂直對齊表格。我個人不喜歡他們，因爲他們可能會很痛苦，以響應。 –

您可以使用此：

#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%);伎倆也。

基本上你設置的行高與容器的高度相同。

來源

2015-07-20 10:43:41

此解決方案的問題是，我可以只有一行文本使用此...但我有多行。 – Daniel

請檢查我的解決方案..這將適用於多行.. –

試過了...只有一行顯示在div內，其他顯示在它外面... – Daniel

看你有沒有以下的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%); 
}

你只需要您的一個origi變化不大最終代碼 -

#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 */ 
}

來源

2015-07-20 11:05:14

不能在div中垂直對齊

回答

相關問題