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

<强>已更新请在您的CSS中添加此行

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

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

这是工作的解决方案，即使你的div中的文字会增加，它也会起作用。最后的快速答案就可以了......

Answer 2

您可以使用：

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

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

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

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

3 个答案: