css - HTML Div/居中

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 标签对我来说从来没有意义，我似乎无法处理它。

score 0 · Accepted Answer

试试这个样品......

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

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

演示：http: //jsfiddle.net/ypwjY/

score 0 · Accepted Answer

看看链接

添加一些CSS

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

}

.centeredlistleft {

    margin-right:10px;
}

.centeredlistright {

    margin-left:10px;
}

score 0 · Accepted Answer

这行得通。为两个列表放置一个包装器分区

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

注意到一些要点：

由于在 centeredlistleft 部门中，q0re 给出的解决方案不起作用（尽管我不是反对者:)）float:left。相反，两个列表（div）都应该显示为内联块。

由于 align="center" ，SKV 的解决方案可能有效（我尚未测试过），但这是一种已弃用的样式方式。

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

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

快乐的网络开发！

score -1 · Accepted Answer

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

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

css - HTML Div/居中

4 回答 4

Related

Reference