Question

我的结构如下：

<style>
#main{
   max-width: 500px;
   margin: 0 auto;
   overflow: hidden;
   border: 1px solid red;
}
#container{
    margin-right: -50px;
}
.block{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid grey;
    margin-right: 30px;
}
</style>
<div id="main">
    <div id="container">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>

如果我有宽的宽度，它看起来像 http://i.stack.imgur.com/3I1yM.png 没关系。

但如果我使用狭窄它很糟糕我需要将内部bloks与此中心对齐

http://i.stack.imgur.com/5GXMJ.png

Answer 1

您所需要的是属性text-align:center：

#container{
  margin-right: -50px;
  text-align:center;
}

演示 http://jsfiddle.net/u5HHc/

Answer 2

这个怎么样？

http://jsfiddle.net/ALR8P/3/

从块中移除边距，用户文本对齐对齐并添加字间距，如果你想在最后一行的块上有一些固定的空间。

#container {
  letter-spacing: 10px; //word-spacing: 10px; //to space blocks on last row
  text-align: justify; //to align everything to the borders on the first lines
  padding: 0px 10px; //to separate the blocks from the borders a little
}

.block {
  margin-right: 0px;
}

当宽度太小并且每行只有一个块适合时看起来不对，但是在那里你可能需要一些媒体查询来让你的css响应以修复那个特殊情况。

编辑：字母间距更好的横切浏览器http://jsfiddle.net/ALR8P/5/，你可能想要字母间距：30px;因为你的保证金是30px

灵活的html模型与对齐

2 个答案: