将父元素中点周围的多个元素居中

时间：2016-04-04 11:34:15

标签： javascript html css position

我必须在元素的中点周围浮动多个元素。目前使用display: table / display: table-cell

在css中解决了这个问题

这个解决方案的问题在于每组块都必须包含一个额外的元素，这使得很难对这个响应进行布局。而且，可见顺序不正确。

我想使用javascript，使用position: absolute来对齐元素，但我不知道如何计算偏移量。另一种选择可能是动态创建每个组（取决于窗口宽度/高度），并使用实际的css（下面）来对齐元素。

＆＃13;
＆＃13; 
html, body {
  height: 100%;
}

.blocks {
  display: table;
  margin-left: auto;
  margin-right: auto;
  max-width: 40em;
  width: 100%;
  height: 100%;
}

.group {
  display: table-cell;
  vertical-align: middle;
}

.block {
  background-color: rgb(50, 50, 50);
  color: rgb(255, 255, 255);
  height: 8em;
  line-height: 8em;
  margin: 1em;
  text-align: center;
  width: 8em;
}

/* Debug
------------------------------------------------ */
 .blocks {
  counter-reset: tile;
}
.block:before {
  counter-increment: tile;
  content: counter(tile);
}
＆＃13; 
<!-- small screens -->
<div class="blocks">
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

<hr>

<!-- large screens -->
<div class="blocks">
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

<!-- huge screens -->
<div class="blocks">
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

...为了完整性，position:absolute方法：

＆＃13;
＆＃13; 
.blocks {
  margin-left: auto;
  margin-right: auto;
  max-width: 40em;
  position: relative;
}
.block {
  background-color: rgb(0, 225, 225);
  border: 1px solid white;
  box-sizing:border-box;
  height: 8em;
  line-height: 8em;
  position: absolute;
  text-align: center;
  width: 8em;
}
.block:nth-of-type(1) {
  top: 8em;
  left: 0;
}
.block:nth-of-type(2) {
  top: 4em;
  left: 8em;
}
.block:nth-of-type(3) {
  top: 0;
  left: 16em;
}
.block:nth-of-type(4) {
  top: 4em;
  left: 24em;
}
.block:nth-of-type(5) {
  top: 8em;
  left: 32em;
}
.block:nth-of-type(6) {
  top: 16em;
  left: 0;
}
.block:nth-of-type(7) {
  top: 12em;
  left: 8em;
}
.block:nth-of-type(8) {
  top: 8em;
  left: 16em;
}
.block:nth-of-type(9) {
  top: 12em;
  left: 24em;
}
.block:nth-of-type(10) {
  top: 16em;
  left: 32em;
}
.block:nth-of-type(11) {
  top: 20em;
  left: 8em;
}
.block:nth-of-type(12) {
  top: 16em;
  left: 16em;
}
.block:nth-of-type(13) {
  top: 20em;
  left: 24em;
}
.block:nth-of-type(14) {
  top: 24em;
  left: 16em;
}
/* Debug
------------------------------------------------ */
 .blocks {
  counter-reset: tile;
}
.block:before {
  counter-increment: tile;
  content: counter(tile);
}
＆＃13; 
<div class="blocks">
  <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 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>
＆＃13;
＆＃13;
＆＃13;

理想情况下，布局会同时考虑窗口宽度和高度。这样块总是适合当前的屏幕尺寸。可以这样做：

var cols = Math.floor(innerWidth / children[0].clientWidth)
var rows = Math.round(innerHeight / children[0].clientHeight)

我现在已经搜索了一段时间，但还没有找到任何现有的解决方案。最接近的是：

顺便说一句，我的灵感来自https://typekit.com/;）

2 个答案:

答案 0 :(得分：1)

得到它...基于百分比的解决方案，创建一个均匀间隔的网格。

感觉有点hacky，但应该有效：

＆＃13;
＆＃13; 
html, body, .blocks {
  height: 100%;
}

.block {
  background: #e44;
  float: left;
}

/* Debug
------------------------------------------------ */
.blocks {
  counter-reset: tile;
}
.block:before {
  counter-increment: tile;
  content: counter(tile);
}
＆＃13; 
<div class="blocks">
  <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 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 class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>
＆＃13; 
self.clock = NSTimer.scheduledTimerWithTimeInterval(1.0, target: self, selector: #selector(ViewController.updateClock), userInfo: nil, repeats: true)

func updateClock() {
      dispatch_async(dispatch_get_main_queue()) {
        let date = NSDate();
        // "Apr 1, 2015, 8:53 AM" <-- local without seconds

        var formatter = NSDateFormatter();
        formatter.dateFormat = "yyyy-MM-dd HH:mm:ss"

        _ = formatter.stringFromDate(date);
                    // "2015-04-01 08:52:00 -0400" <-- same date, local, but with seconds
        formatter.timeZone = NSTimeZone(abbreviation: "CET");
        let cetTimeZoneStr = formatter.stringFromDate(date);
        // "2015-04-01 12:52:00 +0000" <-- same date, now in UTC

        self.timer.text = cetTimeZoneStr


    }
}
＆＃13;
＆＃13;
＆＃13;

对不起，代码没有评论......

答案 1 :(得分：0)

flexbox网格怎么样？您可以通过order的{​​{1}}属性对各种宽度的项目重新排序。请参阅下面的网格快速示例。 

flexbox
.list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  flex-flow: column wrap;
  align-items: center;  
  align-content: center;
  justify-content: center;
  height: 500px;
  box-sizing: border-box;
}

.box-wrapper {
  background: lightblue;
  width: 100px;
  height: 100%;
  border: 1px solid blue;
  box-sizing: border-box;
  display: flex;
  flex-flow: column wrap;
  align-items: center;  
  align-content: center;
  justify-content: center;
}

.box {
  background: red;
  border: 1px solid darkred;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
}

相关问题
最新问题