使用css的中心背景颜色

时间：2014-09-20 16:53:07

标签： html css

我打算在html页面的中心添加颜色。我试过这个：

我的html文件

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<div id="v">
</div>
</body>
</html>

我的styles.css

#v {
 background: red;
 position: center;
}

2 个答案:

答案 0 :(得分：0)

您可以将高度和宽度设置为div并添加如下边距：

#v {
 height: 100px;
 width: 100px;
 background-color: red;
 margin: auto;
}

答案 1 :(得分：0)

我认为你的意思是在页面上居中一个元素，然后为该元素添加背景颜色。虽然你确实接近了，但你的CSS无效。如果你想添加背景，那么你需要使用背景颜色。如果您想将该元素居中，那么您可以在此处调整所述元素的边距。是一个可能有帮助的例子。

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>

<style type="text/css">

.wrapper{
    width: 100%;
    height: 400px;
    background-color: blue;
    margin: 0 auoto;
}
.centered-element{
    width: 50%;
    height: 200px;
    margin: 0 auto;
    background-color: red;
}

p{
    text-align: center;
    }
</style>

</head>

<body>

<div class="wrapper">
    <div class="centered-element">
        <p>this div is centered!</p>
    </div>
</div>

</body>
</html>

我所做的是给了我想要居中对齐0自动余量的div;这将使div对齐。我希望有所帮助！