文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在div中不能垂直对齐

问在div中不能垂直对齐
EN

Stack Overflow用户
提问于 2015-07-20 10:38:01
回答 3查看 85关注 0票数 1

因此，我有一个小问题，垂直对齐在一个div内的文本。即使我认为它可能会起作用(就像下面例子中的大框)，文本也会下降太多。

为了查看示例，请在全屏上查看它。

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<!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的中间。

我尝试了这里提出的任何一种解决方案，却找不到为什么它不起作用。

请帮帮我!

html
css
vertical-alignment
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-07-20 10:43:49

更新的请在css中添加这一行

代码语言：javascript
复制
#container #siteBody .row .block
{
   display:table; 
}

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

这是工作解决方案，即使您的文本在div中将增加，它将work..sorry为最后的快速answer..ty。

票数 3
EN

Stack Overflow用户

发布于 2015-07-20 10:43:41

你可以用这个：

代码语言：javascript
复制
#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的技巧。

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

票数 1
EN

Stack Overflow用户

发布于 2015-07-20 11:05:14

你有下面的CSS代码-

代码语言：javascript
复制
#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%);
}

你只需要对你的原始代码做一些改动-

代码语言：javascript
复制
#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  */
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/31514363

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档