专栏首页solate 杂货铺vue css 实现在盒子中居中对齐

vue css 实现在盒子中居中对齐

需求

需要在一个盒子内将文字水平垂直居中对齐

实现

<template>
  <div>
    <div class="wrapper">
      <div class="wrapper-content" v-for="item in dataList">
        <div class="child-box">
          <span class="child-font">{{item.id}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      dataList: [
        { id: 1, name: 'F1' },
        { id: 2, name: 'F2' },
        { id: 3, name: 'F3' },
        { id: 4, name: 'F4' },
        { id: 5, name: 'F5' },
        { id: 6, name: 'F6' },
        { id: 7, name: 'F6' },
      ]
    }
  },
}
</script>

<style scoped>

.wrapper{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}
.wrapper-content{
  width: 33%;
  margin-top: 20px;
}

/*
在盒子中水平垂直居中
*/
.child-box {
  box-shadow: 0 0 30px 2px #918f8f;
  width: 300px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
}
.child-font {
  color: #2D71DB;
}

</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端成神之路-学成在线

    欲先善其事,必先利其器。 先把我们的前期准备工作做好, 我们本次采取结构与样式相分离思想。

    海仔
  • 【Canvas】266- 更优雅地基于 canvas 在前端画海报

    我们的业务涉及电商、教育行业,出于营销以及功能需要,会有很多卡片展示(长按保存)的需求,或者分享长图的需求。以及我们有面向商家的 PC 端,商家端又能编辑、实时...

    pingan8787
  • 从零开始学 Web 之 CSS(四)CSS初始化、定位、overflow、标签规范

    CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面...

    Daotin
  • 前端成神之路-CSS高级技巧

    所以我们知道,我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。

    海仔
  • 关于 vertical-align 你应该知道的一切

    vertical-align,写过 CSS 的朋友们肯定都知道这个属性的作用,顾名思义,垂直对齐,主要目的用于将相邻的文本与元素对齐。MDN 中对它的定义如下:

    政采云前端团队
  • Day5:html和css

    如何实现盒子居中问题,要让盒子实现水平居中,要满足是快级元素,而且盒子的宽度要定义。然后数值为auto即可。

    达达前端
  • CSS高级技巧 CSS用户界面样式

    所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓以及 防止表单域拖拽等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我...

    清出于兰
  • CSS用户界面样式

    所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓以及 防止表单域拖拽等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我...

    星辰_大海
  • 大型编程电视剧连载 | CSS知识点硬核整理归纳(二)

    网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢?

    XiaoLin_Java
  • 【云+社区年度征文】2020一网打尽CSS世界

    一个水平流上只能单独显示一个元素,因此理论上都可以配合clear属性来清除浮动带来的影响。

    奋飛
  • CSS Conf -《新时代CSS布局》学习总结

    CSS布局经常是令前端开发者头痛的一块工作。但是近几年来,浏览器不断发展,开始支持弹性盒子、网格布局、盒模型对齐等布局功能。这些CSS标准纯粹是为了应付网络布局...

    陈大鱼头
  • CSS上下左右居中

    关键是利用transform百分比相对自身宽高计算的特性,如果环境不支持transform的话,就需要用一些比较老,但很精妙的技巧了

    ayqy贾杰
  • 把所有的东西都对齐吧 - 谈谈垂直居中的解决方案

    "44年前我们就把人类送上了月球了,但现在我们仍然无法在css中实现垂直居中 -James Anderson" 难题 在CSS中对元素进行水平居中是非常简单的...

    okaychen
  • HTML & CSS页面布局之定位

    默认情况下,HTML元素都在标准流中呈现和展示。我们之前把元素分为块级元素,行内元素,行内块级元素,他们的特性是块级独占一行,行内和行内块级可以在一行内共存,这...

    用户5997198
  • 前端基础篇之CSS世界

    我想你每天写css代码有时候也会觉得很痛苦:这个布局的css怎么这么难实现!我也经常会有这种感觉,一个看似简单的布局总是要琢磨半天才能实现,偶尔还会出现一些怪异...

    Nealyang
  • css笔记

    从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成...

    用户6362579
  • 从零开始学 Web 系列教程

    在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

    Daotin
  • vertical-align刨根问底

    本文第一部分翻译自Vertical-Align: All You Need To Know,就是之前在CSS上下左右居中参考资料部分提到的待翻译的那一篇

    ayqy贾杰
  • 17个场景,带你入门CSS布局

    CSS 布局本质就是控制元素的位置和大小。比如这样的布局:元素宽960px,水平居中。宽960px是大小。水平居中是位置。又如这样的布局:两个元素在一行,左侧元...

    前端GoGoGo

扫码关注云+社区

领取腾讯云代金券