Vue e-row、el-col高度一致且内容居中

Posted 2023-03-23

参考技术A 一、 el-col高度一致且内容居中

1.高度一致  

2.内容居中 

二、只内容居中:  align="middle" 参考技术B

先设置el-row为flex布局

el-col有个属性是float：left

float就是导致高度不一致的元凶，所以需要清除浮动

在最后一个el-col下面加个<div style="clear:both"></div>用clear:both清除浮动

然后在高度较低的el-col内的div上加个height="100%"就解决了

<el-row type="flex" style="flex-flow: row wrap;">

<el-col :span="12">

(...代码)

</el-col>

<el-col :span="12">

<div style="height: 100%">

(...代码)

</div>

</el-col>

<div style="clear:both"></div>

</el-row>

垂直居中内容区域直到达到一定高度？

【中文标题】垂直居中内容区域直到达到一定高度？

【英文标题】：Vertically center a content area until it reaches a certain height?

【发布时间】：2013-11-27 05:09:22

【问题描述】：

如何允许动态（高度变化）内容区域在用户屏幕上垂直居中（无论屏幕大小），直到它到达顶部只有100px 剩余可用空间的点页面的？

这是一个图表：

我不完全确定这个问题的解决方案是只使用 CSS 还是 javascript - 所以欢迎所有建议。

【问题讨论】：

有趣的问题！我没有看到任何可以实现此目的的 CSS 属性。但是，也许它存在。您可以尝试以这种方式使用 css 和 javascript。使用 css position:relative 和 js 设置 top。当 DCA.height()+100 top 设置为 (container.height - DCA.height)。否则，top 为 0，因此 DCA 将附加到容器的顶部，假设容器从“内容无法通过此高度”行开始。让我试试 jsfiddle 并编辑我的帖子。

有意思，我也去试试 TCHdvlp。

@4M01 我确实尝试过使用max-height，但我没有运气！

内容区域高度增加的原因是什么？浏览器视口宽度？

嗨，亚历克斯。 “内容区域”（蓝色）的 div 高度随着内容的归档而增加。例如字母。

【参考方案1】：

我的解决方案考虑到您希望您的内容集中在整个页面上，而不仅仅是“在下面的空间中”。我使用负边距来实现这一点。

在此处查看工作示例：

http://jsfiddle.net/WkQzw/5/

HTML：

<div id="container">
    <div id="table">
        <div id="cell">
            <div id="content">Some content</div>
        </div>
    </div>
</div>

CSS：

#container 
    width: 100%;
    height: 100%;
    padding: 100px 0;
    margin-top: -100px;

#table 
    display: table;
    width: 100%;
    height: 100%;
    margin-top: 100px;

#cell 
    display: table-cell;
    vertical-align: middle;

#content 
    background-color: lightblue;
    width: 50%;
    margin: 0 auto;

测试：

IE 9 Win7 --> 工作 Chrome 30 Mac --> 工作 Safari 7 Mac --> 工作 Firefox 25 Mac --> 工作

更新：

我使用了box-sizing: border-box;，但 Firefox 需要一个额外的-moz-box-sizing: border-box;。现在它也适用于 Firefox。

【讨论】：

太令人兴奋了。谢谢托尼，我试试看！

很好的答案，它就像一个魅力。与你的 JS Fiddle 一起工作也很好。

谢谢 :) 很高兴我能帮上忙。

【参考方案2】：

纯 CSS，不使用表格

解决此问题的另一种方法是使用CSS Grids。 align-items 属性允许您轻松地垂直对齐网格内容，当内容超出单元格时恢复正常对齐。

一个例子：

function removeParagraph() 
  
  const p = document.querySelector('p')
  
  if (p)
    p.parentNode.removeChild(p)
    


function addParagraph () 

  const p = document.createElement('p')
  
  p.textContent = 'Bacon ipsum dolor sit amet drumstick rump swine capicola pastrami boudin t-bone, ground round filet mignon andouille frankfurter meatloaf.'
  
  document.querySelector('#content').appendChild(p)

html, body 
    
  height: 100%;
  
  margin: 0;
  padding: 0;
    


#wrapper 
  
  height: 100%;
  
  display: grid;
    
  grid-template-rows: 50px 1fr;
    
  align-items: center;
  


#space 
  
  height: 50px;
  width: 100%;
  
  border-bottom: 2px dashed red;
  
  color: red;
  
  text-align: center;
  
  line-height: 50px;
  


#content 
  
  width: 80%;
  
  background-color: lightblue;
  
  margin: 0 auto;



p 
  
  padding: 10px;
  margin: 0;

<section id="wrapper">
  <div id="space">
     <button onclick="removeParagraph()">remove paragraph</button>
     <button onclick="addParagraph()">add paragraph</button>
  </div>
  <div id="content">
    <p>Bacon ipsum dolor sit amet drumstick rump swine capicola pastrami boudin t-bone, ground round filet mignon andouille frankfurter meatloaf.
    </p>
  </div>
</section>

在上面的示例中，我使用 Javascript 来允许您添加/删除段落，以便您可以看到增加内容的效果。这仍然是解决问题的纯 CSS 解决方案。

根据您的受众，对 CSS 网格的支持是 pretty good。

【讨论】：

这太棒了@shennan。关于为什么这不适用于 flexbox 的任何见解？当我使用 flex 时，内容会滚动，但顶部会被剪掉。

【参考方案3】：

纯 CSS，精简 HTML

这是基于ToniTornado's answer，但需要的包装器要少得多。

See fiddle demo

HTML

<div id="container">
      <div id="content">Some content</div>
</div>

CSS（垂直定位的最小值）

* 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;


html, body 
    height: 100%;
    margin: 0;
    padding: 0;


body 
    display: table;
    padding-top: 100px;
    margin-top: -100px;


#container 
    display: table-cell;
    vertical-align: middle;
    padding-top: 100px;

顶部区域下方的可选垂直居中

As the above fiddle showed，上面的css将#content放在屏幕空间的中心。 如果您希望在顶部区域下方的左侧空间居中，则通过删除负上边距来调整 body 并通过删除其顶部填充来调整 #container , like this fiddle 而这个 css 显示：

body 
    display: table;
    padding-top: 100px;


#container 
    display: table-cell;
    vertical-align: middle;

【参考方案4】：

无表格但基于 javascript 的解决方案（只是为了增加多样性）

HTML

<div id="container">
    <div id="topbar">You can't touch me</div>
    <div id="content">Aliquam erat volutpat...</div>
</div>

CSS

div#topbar 
    border: 2px dashed red;
    height: 50px;
    text-align: center;

div#content 
    background: #90c0ff;
    width: 260px;
    margin: 0px auto;
    position: relative;

Javascript

var content = document.getElementById('content');
var topMargin = (window.innerHeight - document.getElementById('topbar').offsetHeight - content.offsetHeight) / 2;
if (topMargin < 0) 
    topMargin = 0;

content.style.top = topMargin + 'px';

http://jsfiddle.net/SD7SA/

【讨论】：

谢谢 András，比起那些乱七八糟的桌子，我更喜欢这个解决方案。

【参考方案5】：

虽然它需要额外的.wrapper，但这种布局对于display: table; 和朋友来说是可行的：

html

<div class="container">
    <div class="top">some space</div>
    <div class="wrapper">
        <div class="content">
            <div style="height: [any height]">centered content</div>
        </div>
    </div>
</div>

css

.container 
    display: table;
    width: 100%;
    height: 100%;

.top 
    height: 100px;
    display: table-row;

.wrapper 
    /* this will take up remaining height (or stretch to content) */
    display: table-row;

.content 
    /* because this is displayed as a table cell, the vertical align centers
     * its content (instead of how it usually works on inline elements) */
    display: table-cell;
    vertical-align: middle;

http://jsfiddle.net/gLECE/3/

更新

上面的内容将在 top 100px 和底部 之间居中，而不是在 viewport 顶部和底部 之间（使用 css 实现此目的的一个 hacky 方法是 @987654322 @ 但 ToniTornado 的回答是一个可靠的解决方法）

@TCHdvlp 的尝试很接近，但缺少一些重要部分（缺少顶部空间，实际上并没有完全居中）。

TCHdvlp 脚本的工作、编辑版本：

var height = $(document.body).height();
$(".dca").each(function()
    if(($(this).height()+100) < height)
        $(this).css(top: '50%', marginTop: - $(this).height() / 2 );
    
);

http://jsfiddle.net/gLECE/6/

注意：您可能不仅希望在页面加载时执行此操作，还希望在调整窗口大小时执行此操作。

【讨论】：

表格是邪恶的，尽管在这种情况下它们可能是不可避免的。

@MaXX <table> 被认为不利于布局，但没有理由避免 display: table;。甚至支持 ie8 :)

是的，但是在 （或 ）中，即使在最新的浏览器中，也会出现额外的定位错误。这是因为我总是避免使用表格，而不是因为标准。 @MaXX 抱歉，我不太明白您所说的“使用附加定位车”是什么意思？如果您查看接受的答案，它会很有魅力（并且正在使用 CSS 表格，就像我的尝试一样）对不起。我想到了你最里面的 div 的内容。目前尚不清楚绝对，相对等定位如何在其中起作用，没有记录在案，在我的实验中我发现它们有问题且有问题。有人可能会弄清楚这是如何工作的，但不会是 w3.org 上的文档。

【参考方案6】：

确保您已使用 <!DOCTYPE html> 启用 html5 声明

之后，使用<center style="width:100%;"></center> 标签来集中你的元素。

上面标签中的任何元素都将集中和响应。

【讨论】：

没有解决垂直中心化的问题。 （并且也违反了 html5 标准，尽管大多数浏览器都可以处理它。 更好）

【参考方案7】：

没有 JS 是可能的，但肯定很难，而且可能需要使用大量 CSS 代码，这与旧 (

概念如下：

将外部 div 水平放置和垂直居中（它是 很难，如果你的身高不固定） 给他一个最大高度：100% 在此 div 中创建一个与顶部垂直对齐的内部 div。

如果你愿意，我可以在一个 jsfiddle 中为你做这个。

【讨论】：

嗨，MaXX。这对我来说很有意义，但是当顶部只剩下100px 的空间时，是什么阻止了外部 div 向上扩展？

嗨，亚当。 max-height: 100% 将防止这种情况。如果不知道身体的高度，那么困难的是垂直中间位置。

【参考方案8】：

有趣的问题！我没有看到任何可以实现此目的的 CSS 属性。但是，也许它存在。您可以尝试以这种方式使用 css 和 javascript。使用 css position:relative 和 js 设置顶部。当 DCA.height()+100 top，假设容器从“内容无法通过此高度”行开始。让我试试 jsfiddle 并编辑我的帖子。

这里是：

http://jsfiddle.net/TCHdevlp/gLECE/

【讨论】：

嗯，不知道容器的实际高度是否可以实现？内容框内的高度会有所不同，所以#container 不会随之波动吗？或者您会建议检测用户的屏幕高度并将其设置为#container 高度吗？

请记住，这是在整个屏幕/窗口中进行的。

在我的例子中，容器是一个 div。我选择它作为容器。您可以选择窗口作为整个容器。正如您在我的示例中看到的，我没有像DCAHeight+100 < 500 那样执行我的计算，但我得到了container.height。容器大小可能不同，效果会很好。

为什么数字 3 比数字 2 高？