Question

我试图将一堆具有固定大小的div中心化。我希望它使用相对/未指定的窗口大小。只要div不会绕到下一行，下面的代码就可以工作。一旦它们包裹起来，一切都会向左对齐。该计划是动态生成许多这些并且只能垂直滚动。我的CSS技能非常弱。有什么建议？提前谢谢。

＆＃13;

.container {
  margin: 0 auto; 
  display: table;
}
.block {
  background: #999; 
  float: left; 
  width: 50px;
  height: 50px; 
  margin: 5px; 
}

＆＃13;

<html>
<head>
</head>
<body>

<div class="container">
	<div class="block">1</div>
	<div class="block">2</div>
	<div class="block">3</div>
	<div class="block">4</div>
     <!--
	<div class="block">5</div>
	<div class="block">6</div>
	<div class="block">7</div>
	<div class="block">8</div>
	<div class="block">9</div>
	<div class="block">10</div>
	<div class="block">11</div>
	<div class="block">12</div>
	<div class="block">13</div>
	<div class="block">14</div>
	<div class="block">15</div>
    -->
</div>

</body>
</html>

＆＃13;

Answer 1

您可以使用display:inline-block;代替float:left，然后将text-align:center;提供给其父母，不要忘记display:inline-block; .container { margin: 0 auto; display: table; text-align:center; } .block { background: #999; /* float: left; */ display:inline-block; width: 50px; height: 50px; margin: 5px; } <html> <head> </head> <body> <div class="container"> <div class="block">1</div> <div class="block">2</div> <div class="block">3</div> <div class="block">4</div> <div class="block">5</div> <div class="block">6</div> <div class="block">7</div> <div class="block">8</div> <div class="block">9</div> <div class="block">10</div> <div class="block">11</div> <div class="block">12</div> <div class="block">13</div> <div class="block">14</div> <div class="block">15</div> </div> </body> </html> }

＆＃13;

Widgets

＆＃13;

import Widgets from './Widgets/Widgets';
export default Widgets;

＆＃13;

居中一系列DIV

1 个答案: