容器的 CSS 垂直对齐答案

【问题标题】：CSS Vertical Alignment of containers容器的 CSS 垂直对齐
【发布时间】：2015-04-20 17:20:18
【问题描述】：

我正在尝试垂直对齐容器。

基本上，顶部容器位于容器右侧几个像素处。我尝试了一些事情，但没有任何成功。有没有人有任何专业知识？

下面是我的 CSS

/* structure */
.container {
    background: #FFF;
    font-size: 1.2em;
    margin: 0 auto;
    padding: 0 10px 10px ;
    width: 780px;
    transform: translateY(2.5%);
    Clear:Left ;
}

/* header */
.top {
    background: url(img/clouds.gif) repeat-x;
    padding: 50px 10px 0;
}

/* title */
.header {
    background: #FFF;
    font-size: 1.2em;
    height: 170px;
    margin: 0 auto;
    padding: 10px 10px 5px;
    width: 780px;
}

.header .left, .header .right {
    background: #A4A4A0;
    color: #FFF;
    height: 150px;  
}

.header .left {
    background: #B3C2C7 url(img/header.jpg) no-repeat;
    font: normal 2.8em "Trebuchet MS",sans-serif;
    line-height: 150px;
    text-align: center; 
    width: 564px;
}

.header .right {
    overflow: auto;
    width: 190px;
}

.header .right p,.header .right h2 {padding: 0 16px;}
.header .right h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;}

/* main */
.main {
    border-top: 4px solid #FFF;
    background: url(img/bgmain.gif) repeat-y;
}

.left {float: left;}

.right {float: right;}

/* structure */
.container {
	background: #F0F0;
	font-size: 1.2em;
	margin: 0 auto;
	padding: 0 10px 10px ;
	width: 780px;
	transform: translateY(2.5%);
	Clear:Left ;
   
}

/* header */
.top {
	
	padding: 50px 10px 0;
	
}

/* title */
.header {
	background: #F1F1;
	font-size: 1.2em;
	height: 170px;
	margin: 0 auto;
	padding: 10px 10px 5px;
	width: 780px;
	
	
}
.header .left, .header .right {
	background: #A4A4A0;
	color: #FFF;
	height: 150px;	
	
}
.header .left {
	
	font: normal 2.8em "Trebuchet MS",sans-serif;
	line-height: 150px;
	text-align: center;	
	width: 564px;
}
.header .right {
	overflow: auto;
	width: 190px;
}
.header .right p,.header .right h2 {padding: 0 16px;}
.header .right h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;}


/* main */
.main {
	border-top: 4px solid #FFF;
    background: #A4A4A0;	
}

<body>

<div class="top">
				
	<div class="header">

		<div class="left">
			xxx 
		</div>
		
		<div class="right">

			<h2>xx</h2>
			<p>xxx</p>

		</div>

		
		
	 <div>	

</div>
<br>
<br>
<div class="container">	

          
	<div class="main">		
        <p>Hello</p>
            
</div>
</div>

【问题讨论】：

请创建一个小提琴，包括 HTML。
你试过vertical-align吗？
是的，我试过垂直对齐

标签： css alignment

【解决方案1】：

vertical-align:middle; 在display:table-cell; 之后工作正常

【讨论】：