Question

我正在尝试将不同宽度的div居中在页面的中心。我正在创建一组设置为在div中浮动的切片，以便尽可能多地适合页面宽度，并在页面宽度扩展或收缩时自动重新配置。这很好用。但我也希望包含瓷砖的div位于页面的中心。看过许多以论坛为中心的解决方案，它们似乎都没有适用于我想要创建的场景。该页面正在iframe中显示，我想知道这是否是问题，但我尝试了自己的页面，没有任何变化。

基本的div结构如下所示。（省略完整的PHP语法）

<div class="centre"> <!-- div containing the tiles -->
  Foreach (....) {   /* loop to create each tile */
    <div class="summary_tile" style="background-image: image-url"> <!-- div for each tile -->
      <div style="background: rgba(255,255,255, 0.6);"> <!-- background to write text over images within each tile -->
      </div>
    </div>
  }
</div>

相关的CSS如下所示。我已经尝试了类中心的各种版本（在下面的CSS中显示为centreN），结果显示在注释中。

div.summary_tile
{
  width: 200px;
  height: 150px; 
  background-position: center; 
  background-repeat: no-repeat;
  border-style: solid;
  border-width: 1px;
  border-color: blue;
  margin: 10px;
  float: left;
}

div.centre /* tiles fill width of window - number of tiles in row varies according to window width but not centered */
{
  margin: 0 auto;
}

div.centre1 /* reduces display to 2 tiles wide, but still not centered - remains fixed when window width reduced - not what I want anyway, but just tried the fixed width to see if it worked */
{
  width: 600px;
  margin: 0 auto;
}

div.centre2 /* tiles fill width of window - number of tiles in row varies according to window     width but not centered */
{
  display: flex;
  justify-content: center;
  text-align; center;
}

div.centre3 /* tiles fill width of window - number of tiles in row varies according to window width but not centered */
{
  display: flex;
  align-items; center;
  justify-content: center;
  text-align; center;
}

div.centre4 /* tiles fill width of window - number of tiles in row varies according to window     width but not centered */
{
  display: table;
  align-items; center;
  justify-content: center;
  text-align; center;
}

div.centre5 /* tiles fill width of window - number of tiles in row varies according to window     width but not centered */
{
  display: inline-block;
  text-align; center;
}

div.centre6 /* tiles fill width of window - number of tiles in row varies according to window     width but not centered */
{
  text-align; center;
}

我还尝试了一个包含每个中心类选项的外部div，并且在包含tile或各种类的div上没有类，但这似乎不起作用。我试图做不可能的事情或者只是没有点击CSS语句和div的正确组合吗？

在页面中居中可变宽度div

0 个答案: