网页元素居中攻略记
关注
分享
扫一扫
网页元素居中系列教程,传统布局到CSS3
crper
对设计、交互、产品都有自己的见解和追求;更多关于我:https://www.yuque.com/crper/blog/about_me
展开
-
网页元素居中攻略记_(6)图片水平垂直居中
借助table的特性来实现原创 2016-03-23 18:25:21 · 3926 阅读 · 0 评论 -
网页元素居中攻略记_(5)未知宽高元素绝对居中
题外话以前,我们要自适应全局居中,需要借助JS或者JQ来实现,现在有了CSS3就可以省去好多功夫了,为什么这么说!! 请看比较:传统的绝对居中 #container{ position:abosolute; top:50%; left:50%; margin-left:-包含块宽度的一半(如 -300px );原创 2015-08-17 11:42:14 · 3325 阅读 · 0 评论 -
网页元素居中攻略记_(4)用CSS3属性让元素水平垂直居中
flex实现子块的完美居中方案父块使用display:flex属性,子块margin自适应即可实现代码index.html<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>块状元素垂直居中(已知高度)</title> <style> *{margin: 0;padding: 0;}原创 2015-05-31 11:47:51 · 3468 阅读 · 1 评论 -
网页元素居中攻略记_(3)已知宽高元素水平垂直居中
已知宽高元素水平垂直居中方案使用了position的absolute属来实现,在上篇文章的垂直居中的基础上加上水平居中代码index.html<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>已知宽高元素水平垂直居中</title> <style> #container {原创 2015-05-31 11:04:55 · 2867 阅读 · 1 评论 -
网页元素居中攻略记_(2)元素垂直居中
单行内元素垂直居中方案 设置行内元素的行高等于父元素的高度或者包裹块的高度即可实现垂直居中,具体看代码效果 代码实现index.html<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>单行内元素垂直居中</title> <style> div { wi原创 2015-05-30 14:55:13 · 2832 阅读 · 0 评论 -
网页元素居中攻略记_(1)元素水平居中
行内元素水平居中方案 行内元素包裹在一个属性display为block的父层元素中，父块text-align:center即可实现 代码实现index.html<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>行内元素水平居中</title> <style type="text/css原创 2015-05-29 22:12:54 · 4123 阅读 · 0 评论