Tagged

居中

A collection of 2 posts

居中

object-fit: 炒鸡方便的图片居中方法

今天在项目中遇到图片居中的问题,嗯,之前也有写过解决这个问题的文章,有n种方法。不过今天要说一个新的方案:object-fit ,嗯,这个才是真的方便的方案啊。 先看预览: 查看详细demo object-fit 只能用于『可替换元素』(replaced element) 。所谓可替换元素,是指元素的内容和表现不是由CSS控制的,独立渲染的外部元素,比如: img、 object、 video 和 表单元素,如textarea、 input,audio 和 canvas在一些特殊情况下,也可以作为可替换元素。 在使用 object-fit 时,一定要设定元素的size,也就是 width 和 height 直入正题,object-fit 有五个可选值,分别是: fill 默认值。填充,可替换元素填满整个内容区域,可能会改变长宽比。 contain 包含,保持长宽比,

css

CSS实现垂直居中的5种方法

利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点。(可以看看测试页面,有简短解释。) 方法一 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。 <div id="wrapper"> <div id="cell"> <div class="content">Content goes here</div> </div&