好的,我知道这个话题已被涵盖.但是我已经研究过各种解决方案并且几乎没有成功.
我只是不知道为什么这个保证金:0自动;不管用.我尝试用宽度补偿填充:calc(33% – 40px);但这不起作用.
.container { margin: 0 auto; } [class*='col-'] { float: left; } .col-2-3 { width: 66.66%; } .col-1-3 { width: 33.33%; } .grid:after { content: ""; display: table; clear: both; } .col-word { width: auto; height: auto; padding: 25px; border: 5px #000 solid; border-left: 0px; border-right: 0px; background-color: #A7F4F6; font-size: xx-large; text-align: center; }
<div class='container'> <div class="grid"> <div class='grid'> <div class="col-1-3"> <p class='col-word'>T</p> <p class='col-word'>V</p> </div> </div> <div class='grid'> <div class='col-1-3'> <div class='letter'>W</div> </div> <div class='col-1-3'> <div class='letter'>P</div> </div> <div class='col-1-3'> <div class='letter'>V</div> </div> </div> </div> </div>
解决方法
这是工作.
问题是你是一个div的中心,默认情况下它是一个块级元素,因此占据其父级(在本例中为body)的100%宽度.所以没有空间可以水平移动,因此没有空间来居中.
有关说明,请参阅此revised demo,其中包含.container附加的边框.
如果减小.container的宽度,您将看到居中的工作.这是第二个revised demo,宽度:50%应用于.container.