So I have a little problem with vertically aligning text inside a 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.
I tried possibly any kind of solution suggested here, and couldn't find why it doesn't work.
Please help me!
UPDATED Please add this lines in your 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