在CSS中水平对齐浮动物品

我有无限数量的DIV标记浮动到左侧。在CSS中水平对齐浮动物品
当浏览器被调整大小时，DIV标签将换行到下一行。
由于DIV标签根据屏幕右侧是否有足够的间距进行包装，因此当它们包装时，会在屏幕的右侧留下很大的空间。
所以如果DIV是32x32，32x32的空间将留在屏幕的右侧。

我想父DIV居中在这种情况下的内容，所以如果有，例如，在右侧的包裹的结果32PX空间，它会调整孩子内容左侧有16px，右侧有16px。

例如，如果没有的内容为中心，屏幕将如下所示：

[DIV] [DIV] [DIV] [DIV] .. GAP |

[DIV] < -Wrapped ................. |

我希望把这些div父的内部，使得DIV被包裹时，内容看起来像下面这样：

..... [DIV] [DIV] [DIV] [DIV] ..... | < - 居中，但仍然向左漂移。

..... [DIV] .............................. | < - Parent居中，但DIV仍然向左浮动。

包裹仍然被允许，但随着浏览器缩小或水平的增长，父DIV自动调整孩子的DIV到中心内容。

我该如何做到这一点？

来源

2010-09-18 George Johnston

我没有看到“图像”的区别1和3，请解释一下。 – cypher 2010-09-18 20:28:14

你可以发布一些标记吗？ – wsanville 2010-09-18 20:31:46

正如你所描述的，你不能这样做。您可以将所有div设置为显示：inline-block而不是float left，然后将它们全部放在一个带有文本对齐中心的大包装div中。尽管如此，这将使得跳转到一行的div而不是左对齐。

或者，您可以设置一个包装div，它的宽度设置为页面的百分比，也是最小像素宽度，然后设置为margin 0 auto。就像：

div.wrapper {width:90%; min-width:800px; margin: 0 auto;}

我怀疑会做你在想什么，但我没有测试过它。希望这引发一些想法！

来源

2010-09-18 21:05:26 Andrew

这可能不是你问什么的，但我认为它符合审美要求：

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<style> 
    #wrapper { 
     margin: 0 auto; 
     border: 1px solid gray; 
     text-align: justify; 
    } 

    .me { 
     display: inline-block; 
     padding: 1em; 
     border: 1px solid blue; 
    } 
</style> 
</head> 
<body> 
    <div id = "wrapper"> 
      <div class="me"><p>One line of stuff in a div.</p></div> 
      <div class="me"><p>One line of stuff in a div.</p></div> 
      <div class="me"><p>One line of stuff in a div.</p></div> 
      <div class="me"><p>One line of stuff in a div.</p> 
       <p>Or two.</p></div> 
      <div class="me"><p>One line of stuff in a div.</p></div> 
      <div class="me"><p>One line of stuff in a div.</p></div> 
      <div class="me"><p>One line of stuff in a div.</p></div> 
    </div> 
</body> 
</html>

来源

2010-09-19 00:39:48

在CSS中水平对齐浮动物品

回答

相关问题