Question

嘿，首先，我对HTML非常糟糕。 Div混淆了我的地狱。现在我要做的是，我希望这两个框在页面中间居中，它们之间约为20px。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FirstCSS.css">
<title>Services and Rates</title>
</head>

<body style="background-color:pink;">
<div id="top" align="center">
<header>
    <h1 style="color:purple">Services and Rates</h1>

    <nav>
    <hr color="purple" width="80%">
    <table style="color:purple">
    <tr>
    <td style="padding-right: 50px"><a href="mqhomepage.html">Home</a></td>
    <td style="padding-right: 50px"><a href="mqaboutme.html">About Me</a></td>
    <td style="padding-right: 50px"><a href="mqphotogallery.html">Photo Gallery</a></td>
    <td><a href="mqservicesandrates.html">Services and Rates</td>
    </tr>
    </table>
    <hr color="purple" width="80%">
    </nav>
    </div>


    <div id="embroideryrates" class="centeredlistleft" >
    <h3 style="color:purple" align="center"> Embroidery </h3>
    <ul>
    <li>Colored Towel (Non White)
    <ul>
    <li>$12</li>
    </ul>
    </li>
    <li>White Towel
    <ul>
    <li>$8</li>
    </ul>
    </li>
    </ul>
    </div>

    <div id="quiltingrates" class="centeredlistright">
    <h3 style="color:purple" align="center"> Quilting </h3>
    <ul>
    <li>Custom Made Quilt
    <ul>
    <li>$400</li>
    </ul>
    </li>
    <li>Batting
    <ul>
    <li>$75</li>
    </ul>
    </li>
    <li> Lessons
    <ul>
    <li> $50/hour</li>
    </ul>
    </li>
    </ul>
    </div>

现在，刺绣和绗缝的两个盒子位于最左侧和右侧。我似乎无法让他们居中。这是我的CSS。

@charset "utf-8";
/* CSS Document */

.centeredlistleft {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:left;

}

.centeredlistright {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:right;

}

.body{
margin: 0;
padding:0;
text-align: center;
color: purple;;
}

我很确定我离开这里并且过于复杂化，但Div标签对我来说再也没有意义，我似乎无法理解它。

Answer 1

试试这个样本......

用下面的css改变你的CSS ......

 .content {
 width: 400px;
 margin: 0 auto;
  background-color:lavender;
 }
.body{
 margin: 0;
 padding:0;
 text-align: center;
 color: purple;;
 }

for demo：http://jsfiddle.net/ypwjY/

Answer 2

这很有效。为两个列表设置一个包装器分区

<div id="listswrapper" >
 <div id="embroideryrates" class="centeredlistleft" >
 <div id="quiltingrates" class="centeredlistright">
</div>

然后按照以下方式进行样式设计：

#listswrapper {
  width: 640px;
  margin: 0 auto;
  text-align: center;

}

.centeredlistleft {
  width:300px;
  margin:0 auto;
  text-align:left;
  border:2px solid;
  display: inline-block;
}

.centeredlistright {
  width:300px;
  margin:0 auto;
  text-align:left;
  border:2px solid;
  display: inline-block;
}

有些观点指出：

q0re给出的解决方案不起作用（虽然我不是那个downvote :)），因为float:left位于集体列表中。相反，列表（div）都应显示为内联块。

由于align =“center”，SKV的解决方案可能会起作用（我没有测试过），但这是一种不推荐的造型方式。

Sindhu的解决方案将中心造型应用于整个身体。如果你想控制每个部门，这可能是不可取的。宽度为400px的内容div也不清楚，因为你的两个部分加上600px加上边框和填充。

非常重要： 可能是您错误地复制了，但请确保您的HTML始终格式正确。我看到一个缺少的身体标签。一般来说，这样的小错误可以（确实）导致初学者的时间错误。

快乐的网络开发！

Answer 3

查看LINK

添加一些css

#listboxes {
  width: 660px;
  margin: 0 auto;
  text-align: center;

}

.centeredlistleft {

    margin-right:10px;
}

.centeredlistright {

    margin-left:10px;
}

Answer 4

在下面的代码中使用请求的结果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FirstCSS.css">
<title>Services and Rates</title>
<style>
@charset "utf-8";
/* CSS Document */

.centeredlistleft {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:left;

}

.centeredlistright {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:right;

}

.body{
margin: 0;
padding:0;
text-align: center;
color: purple;;
}
.outerdiv {
    width:635px;
}
.outermost {

}
</style>
</head>

<body style="background-color:pink;">
<div id="top" align="center">
<header>
    <h1 style="color:purple">Services and Rates</h1>

    <nav>
    <hr color="purple" width="80%">
    <table style="color:purple">
    <tr>
    <td style="padding-right: 50px"><a href="mqhomepage.html">Home</a></td>
    <td style="padding-right: 50px"><a href="mqaboutme.html">About Me</a></td>
    <td style="padding-right: 50px"><a href="mqphotogallery.html">Photo Gallery</a></td>
    <td><a href="mqservicesandrates.html">Services and Rates</td>
    </tr>
    </table>
    <hr color="purple" width="80%">
    </nav>
    </div>
<div class="outermost" align="center">
    <div class="outerdiv">
    <div id="embroideryrates" class="centeredlistleft" >
    <h3 style="color:purple" align="center"> Embroidery </h3>
    <ul>
    <li>Colored Towel (Non White)
    <ul>
    <li>$12</li>
    </ul>
    </li>
    <li>White Towel
    <ul>
    <li>$8</li>
    </ul>
    </li>
    </ul>
    </div>

    <div id="quiltingrates" class="centeredlistright">
    <h3 style="color:purple" align="center"> Quilting </h3>
    <ul>
    <li>Custom Made Quilt
    <ul>
    <li>$400</li>
    </ul>
    </li>
    <li>Batting
    <ul>
    <li>$75</li>
    </ul>
    </li>
    <li> Lessons
    <ul>
    <li> $50/hour</li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
</div>

HTML Div / Centering

4 个答案: