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

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

1.高度一致  

 type="flex"

例:

2.内容居中 

主体内容:style={ 

    position: relative;

    top:50%;

    transform:translateY(-50%);

}

例:

二、只内容居中:  align="middle"

<el-row align="middle"> </e-row>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 使用 CSS 实现居中效果困难吗?显然不是。实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法判断哪种...
    啊啊啊满阅读 307评论 0 0
  • 水平居中 <1>行内元素的居中 被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-alig...
    YM雨蒙阅读 877评论 0 2
  • 1.CSS盒模型,在不同浏览器的差异 css 标准盒子模型 css盒子模型 又称为框模型(Box Model),包...
    泪滴在琴上阅读 208评论 0 2
  • 1、transform实现:(兼容IE) 父元素:position:relative;height:确定高度; 子...
    qiaohj阅读 324评论 0 1
  • 主要摘自:《CSS 揭秘》,强烈推荐的一本书。 “44 年前我们就把人类送上月球了,但现在我们仍然无法在 CSS ...
    grain先森阅读 326评论 0 3