Html 如何在不影响中心对齐的情况下对div应用填充？
非常简单的测试用例：Html 如何在不影响中心对齐的情况下对div应用填充？,html,css,Html,Css,非常简单的测试用例： <!DOCTYPE html> <html> <head> <title>Weird Centering Demo</title> <style type='text/css'> body { margin: 0px; } .test1
<!DOCTYPE html>
<html>
<head>
<title>Weird Centering Demo</title>
<style type='text/css'>
body
{
margin: 0px;
}
.test1
{
width: 100%;
padding: 100px;
text-align: center;
background-color: #acf;
}
.test2
{
width: 100%;
padding: 10px;
text-align: center;
background-color: #aaf;
}
</style>
</head>
<body>
<div class='test1'>Test 1</div>
<div class='test2'>Test 2</div>
</body>
</html>
奇怪的定心演示
身体
{
边际：0px；
}
.test1
{
宽度：100%；
填充：100px；
文本对齐：居中；
背景色：#acf；
}
.test2
{
宽度：100%；
填充：10px；
文本对齐：居中；
背景色：#aaf；
}
测试1
测试2
在不改变居中文本对齐方式的情况下应用填充的惯用方法是什么？一种方法是添加10px，另一种方法是添加100px 由于宽度均为100%，且填充不同，因此其中一个文本将偏离另一个文本的中心，因为其中一个比另一个文本的[宽度]更远 您可以通过使两者具有相同的宽度（主要）和/或相同的填充（次要）来修复它
在：快速链接到css框模型（如果链接适合您）上参加一个交互式有趣的学习课程：在左侧和/或右侧添加填充将增加包含
div的块框的宽度
如果将宽度设置为100%，则计算的宽度将比页面宽，并导致
和溢出条件
如果内容溢出，则它将不居中，而是左对齐
您可以通过添加属性box size:border box
它将包含块框边缘内的填充
然而，最好的解决方案在一定程度上取决于设计的细节
有关框大小的详细信息，请访问：
正文{
边际：0px；
}
.test1{
宽度：100%；
填充：100px；
文本对齐：居中；
背景色：#acf；
框大小：边框框；
}
.test2{
宽度：100%；
填充：10px；
文本对齐：居中；
背景色：#aaf；
框大小：边框框；
}
测试1
测试2
可能是因为100%的宽度。。。你试过设置一个固定的宽度吗？或者，至少是100%以下（比如，尝试90%）。在我看来，把可变尺寸和固定尺寸混合在一起不是个好主意……但我希望它是100%宽度。否则，颜色将无法填充页面的宽度。那么有没有办法指定包含填充的元素的宽度？我只需要一个div来填充可用的宽度，并将内容从其外部边缘移开。另外+1用于提供正确行为的解决方案。我想知道是否有更惯用的方法，因为我们仍然通过应用填充将div推到超过其容器大小的位置，但随后它会被挤压。。。我猜。如果应用box size:border-box
CSS属性，那么您将获得div
，其宽度也考虑了填充。您的第二条评论（idomatic-way-comment）暗指CSS是如何实现box模型的。Internet Explorer用于在元素框的边缘内应用填充，而其他浏览器则增加了框的宽度，以便为填充留出空间。从CSS3开始，box size
使您能够控制行为。