Question

我正试图垂直对齐我的容器。

顶部容器基本上是容器右侧的几个像素。我尝试了一些但没有取得任何成功。有没有人有专业知识？

以下是我的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;
}

＆＃13;

.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;	
}

＆＃13;

<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>

＆＃13;

Answer 1

vertical-align:middle;在display:table-cell;

之后正常工作

CSS垂直对齐容器

1 个答案: