Question

我有一个父母，父母中有y且高度固定。我希望居中对齐其孩子。 子级的内容可能会有所不同，有时会溢出父级并触发滚动条。在这些情况下，孩子的顶部和底部内容被删去了。。

我希望孩子要居中对齐，但前提是孩子要比父母小。或者，它始终可以居中对齐，但是内容不应该被剪掉。

.parent {
  background-color: red;
  height: 40px;
  overflow-y: scroll;
  
  /* Comment out the flex, and all the content will be available */
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
  <div class="child">
    This is a test <br> This is a test <br> This is a test
  </div>
</div>

Answer 1

alignment 将在 flexbox 的 flex轴中工作。因此，您可以切换到列flexbox 并提供min-height: 0（ flex项目的默认min-width: auto设置为child ）.parent { background-color: red; height: 40px; overflow-y: auto; display: flex; flex-direction: column; /* ADDED */ justify-content: center; align-items: center; } .child { min-height: 0; /* ADDED */ }元素-请参见下面的演示

<div class="parent">
  <div class="child">
    1. This is a test <br> 2. This is a test <br> 3. This is a test
  </div>
</div>

      load_csv : function (callback) {
        if(this.encoding === null) this.encoding = 'UTF-8';
        this.loadingItems = true;
        var fileReader = new FileReader();
        fileReader.onload = function (evt) {
          fileContentStr = evt.target.result;
          var items = CSV.parse(fileContentStr);
          callback(items);
        };
        fileReader.readAsText(this.file,  this.encoding);
      },

      prepareData : function (data) {
        var fields = [];
        var items = [];
        data[0].forEach(function (elem, i) {
          fields.push(elem);
        });
        for(var i=1; i<data.length; i++){
          var item = [];
          for(var j=0; j<data[i].length; j++){
            if(!isNaN(data[i][j])){
              item.push(Number(data[i][j]));
            }
            else {
              item.push(data[i][j]);
            }
          }
          items.push(item);
        }
        let dataset = new DataFrame(items, fields);
        this.loadingItems = false;
        this.$emit('loaded-items', dataset);
      }

中心内容从具有固定高度和滚动条的父级中切出

1 个答案: