Question

我想在我的网页上放置三个div，如this，粉色div是另外两个div的容器，我想将div放在网页的中心（垂直和水平）。我准备了一些jsfiddle，但显然我很尴尬，所以效果远远不是预期的...到目前为止，我的CSS看起来像这样：

#intro2{
        background-color: #b0e0e6;
        width: 50%;
        margin: 0 auto;
        font-size: 1.5em;
        }
#intro2 .image{
    position: absolute;
    left: 0px;
    background-color: #aaaae6;
}
#intro2 .text{
    position: relative;
    right: 0px;
    background-color: #cccccc;
}
}

你可以帮帮我吗？感谢。

Answer 1

试试这样： -

#intro2{
	background-color: #b0e0e6;
	width: 50%;
	margin: 0 auto;
	font-size: 1.5em;
	padding: 5px;
}
.clear{
	clear: both;
}
#intro2 .image{
	float:left;
	width:50%;
	background-color: #aaaae6;
}
#intro2 .text{
	float: right;
	width:50%;
	background-color: #cccccc;
}

<div class="intro" id="intro2">
	<div class="image" id="image1">
		<img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" alt="simple" />
	</div>
	<div class="text" id="text1">
		<h1>Simple</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales sit amet mauris in blandit. Aenean sodales in dui eget facilisis. Vestibulum tempor risus dui, sed pharetra nulla auctor id. Sed purus odio, tempus et volutpat a, fermentum sit amet ante. Etiam eros mauris, rutrum at vehicula a, vehicula vitae nulla. Suspendisse non mattis turpis. Donec non convallis lacus. Nullam gravida diam et leo tempor vestibulum. Vivamus lorem nunc, bibendum eu lacinia quis, porta vel nisl. Sed vitae euismod augue. In at est lacinia ipsum feugiat feugiat. Praesent mollis posuere ante, eget maximus est mollis suscipit. Donec ullamcorper elit quis cursus gravida. Quisque leo risus, bibendum sed nisi ut, facilisis iaculis arcu. Pellentesque purus augue, fringilla tempus augue eget, ullamcorper condimentum leo.</p>
	</div>
	<div class="clear"></div>
</div>

Answer 2

下面：

#intro2{
        background-color: #b0e0e6;
        width: 50%;
        left:50%;
        font-size: 1.5em;
        position:absolute;
        margin-left:-25%;
 }

这样你的容器就在页面的中心位置。

Answer 3

我不确定我会不会选择你在这个时候去过的absaloute定位方法。我想也许包装上的display:table和孩子的display:table-cell可以让你更好地控制自己的风格。

#intro2{
    background-color: #b0e0e6;
    width: 50%;
    margin: 0 auto;
    font-size: 1.5em;
}
#intro2 .image{
  background-color: #aaaae6;
  display: table-cell;
  vertical-align: top;
}
#intro2 .text{
  background-color: #cccccc;
  display: table-cell;
  vertical-align: top;
}

以下是一个示例：http://jsfiddle.net/Lfyacy25/2/

Answer 4

http://jsfiddle.net/Lfyacy25/3/

#intro2{
        background-color: #b0e0e6;
        width: 50%;
        margin: 0 auto;
        font-size: 1.5em;
        }
#intro2 .image{
    float: left;
    width: 50%;
    background-color: #aaaae6;
}
#intro2 .text{
   float: left;
    width: 50%;
   background-color: #cccccc;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Answer 5

.intro{
    background-color: #b0e0e6;
    width: 100%;
    margin: 0 auto;
    font-size: 1.5em;
    padding: 5px;
}
.intro:before,.intro:after {
    content: " ";
    display: table;
}
.intro:after {
    clear: both;
}
.image{
    width: 50%;
    background-color: #aaaae6;
    float: left;
}
img{
    margin: 0 auto;
    display: block;
}
.text{
    width: 50%;
    background-color: #cccccc;
    float: left;
}

Updated fiddle

Answer 6

尝试以下方法：

 <div class="outter">
        <div class="innerleft">image goes here</div> 
        <div class="innerright">text goes here</div>
    </div>


.outter {width:100%; min-height:120px; background-color:red; padding:1% }
.innerleft {float:left; width:49%;background-color: green;min-height:120px; }
.innerright {float:right; width:49%;background-color: blue;min-height:120px; }

CSS - 如何将div放在网页上的正确位置

6 个答案: