我正在创建一个非常简单的html页面,并且想知道如何为我的页面执行以下两项操作:
我编写了附加代码,但容器始终贴在左侧,当我调整窗口大小时,它不会改变大小。
<title>Demo</title>
<head>This is a demo</head>
<style>
#nav
{
background-color: red;
float: left;
width: 200px;
position:relative;
}
#detail
{
background-color: green;
float : right;
width: 800px;
position:relative;
}
div.testDetail
{
margin-top:10px;
margin-left:20px;
margin-right:20px;
margin-bottom:10px;
}
#container
{
width:1000px;
position:relative;
}
</style>
<hr>
<body>
<div id="container">
<div id="nav">
<ul>Tests</ul>
</div>
<div id="detail">
<div class="testDetail">
<image style="float:right;margin:5px;" src="test1.jpg" width="50px" height="50px"/>
<image style="float:right;margin:5px;" src="test2.jpg" width="50px" height="50px"/>
<image style="float:right;margin:5px;" src="test3.jpg" width="50px" height="50px"/>
<image style="float:right;margin:5px;" src="test4.jpg" width="50px" height="50px"/>
<h3>Title</h3>
<p>Testing</p>
</div>
<hr>
</div>
</div>
<body>
我在这里错过了什么吗?任何帮助将不胜感激!
感谢。
答案 0 :(得分:6)
<div id="my-div">
...content goes here
</div>
CSS
#my-div{
//For center align
margin: 0 auto;
// For grow & shrink as per screen size change values as per your requirements
width: 80%;
height: 50%;
}
答案 1 :(得分:3)
Matt的CSS进行水平居中的简写方法是
margin: 0 auto;
0将指示顶部和底部边距以及自动左右边距。如果你想在顶部/底部有一个边距,你可以将0改为你想要的任何东西(即margin: 20px auto;
。
答案 2 :(得分:2)
使对象居中的最佳方法,尤其是<div>
,是使用以下CSS:
margin-left: auto;
margin-right: auto;
没有固定的边距,对象将居中。
对于调整大小,使页面的大小相对(例如40%)而不是绝对大小(例如400px)。