居中未知元素(翻译https://css-tricks.com/centering-in-the-unknown/)
在web开发中,当你遇到居中元素时,知道越多关于元素本身和父级元素的信息,居中做起来就很轻松。但是,当遇到你一点都不知道的元素该怎么办?
It's still kinda doable。
不会很难:已知元素
当你知道元素和父级元素的长宽(其中不考虑浮动的环境),傻瓜式的办法就是采用绝对定位,设置top和left将其设置居中。如果你只知道元素的长宽,但是父级元素长宽是变化的,那么可以采用定位改元素,设置top和left为50%,然后采用margin-top和margin-left为宽和长为值的一半,并为负值。
如下图:
难:未知元素
那么难点来了,当你不知道元素的尺寸怎么办,同时父级元素也是不知道。
最简单的方法是采用table
<table style="width: 100%;">
<tr>
<td style="text-align: center; vertical-align: middle;">
Unknown stuff to be centered.
</td>
</tr>
</table>
当然你会担心table做法会引来语义上不好, 你可以尝试这么做,同样可以做到像tables
<div class="something-semantic">
<div class="something-else-semantic">
Unknown stuff to be centered.
</div>
</div>
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}
css tables可能更合适,但是也不一定。 table确实渲染的方式和普通的block不一样。例如100%长度的元素,table只会根据内部需求设置长度(为什么我在本地试一下,并不是,有待考察),而block的div是拓展到和父类元素一样宽。
然后某人给我写到一个很聪明的方法。 如果我们设置一个ghost元素在父类元素中,这个ghost元素的高度是100%,那么我们使用vertical-align:middle可以使得父级元素内的元素居中。
/* This parent can be any width and height */
.block {
text-align: center; /* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
} /* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
} /* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
ghost元素一定是一些语义化的元素吗? 不,可以是伪元素。
这种方法是最好的,但是兼容性是有问题,IE7一下不支持伪代码的,可以采
用span代替
居中未知元素(翻译https://css-tricks.com/centering-in-the-unknown/)的更多相关文章
- CSS居中完全指南——构建CSS居中决策树
CSS居中完全指南--构建CSS居中决策树 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到CSS居中问题时有章可循. 参考Centering in CSS: A Com ...
- 右边根据左边的高度自动居中只需要两行CSS就可以完成
右边根据左边的高度自动居中只需要两行CSS就可以完成 <style type="text/css" > div{ display: inline-block; vert ...
- 【翻译】CSS水平和垂直居中的12种方法
英语原文链接 在CSS中有许多不同的方法能够做到水平和垂直居中,但很难去选择合适的那个.我会向你展示我所看到的所有的方法,帮助你在所面对的情境下选择最棒的那一个. 方法1 此方法将只能垂直居中单行文本 ...
- Normalize.css源码注释翻译&浏览器css兼容问题的理解
版本v5.0.0源码地址: https://necolas.github.io/normalize.css/5.0.0/normalize.css 翻译版: /*! normalize.css v5. ...
- css图片居中,通过纯css实现图片居中的多种实现方法
在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结: html结构: <div class="demo" ...
- css 多个不定数量提交按钮居中显示,纯css解决
前几天在公司修改一个css 多个按钮居中问题,其实这样的问题很多前端程序员都遇到过,举个例子吧: 在一行中有三个按钮或是两个按钮...个数不定,然后间距固定:然后就有很多人把所有按钮放到一个div中, ...
- [翻译]解读CSS中的长度单位
测量,在WEB设计上是非常重要的.在CSS中有至少10种不同的测量单位.每种单位都有其独特的作用,使用它们,可以使页面,在各种设备上,很好的工作.一旦你熟悉了所有这些单位,你可以更准确地设定元素的大小 ...
- 翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案
原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛 ...
- 【翻译】CSS Animations VS the Web Animations API:案例学习
原文地址:CSS Animations vs the Web Animations API: A Case Study May 03, 2017 css, javascript 上周我写了我如何使用C ...
随机推荐
- python_案例综合:教材记录管理
class Book(): def __init__(self,ISBN,Ftile,Author,Publisher): self.ISBN = ISBN self.Ftile = Ftile se ...
- MAYA删除不干净
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- LeetCode 222.完全二叉树的节点个数(C++)
给出一个完全二叉树,求出该树的节点个数. 说明: 完全二叉树的定义如下:在完全二叉树中,除了最底层节点可能没填满外,其余每层节点数都达到最大值,并且最下面一层的节点都集中在该层最左边的若干位置.若最底 ...
- nginx的反向代理功能和负载均衡
使用nginx实现反向代理 Nginx只做请求的转发,后台有多个http服务器提供服务,nginx的功能就是把请求转发给后面的服务器,决定把请求转发给谁. 1安装tomcat 在一个虚拟机上创建两个t ...
- java.lang.ArrayIndexOutOfBoundsException: 160
项目突然出现这个问题java.lang.ArrayIndexOutOfBoundsException: 160,找了好大半天没有找出来哪里的问题,最后发现时fastjson.jar 版本太低了造成的, ...
- WinPcap抓取数据包
#WinPcap和Libpcap的最强大的特性之一,是拥有过滤数据包的引擎. 它提供了有效的方法去获取网络中的某些数据包,这也是WinPcap捕获机制中的一个组成部分. 用来过滤数据包的函数是#
- JavaScript 数组(Array)
//声明方式 //调用 Array构造函数创建并赋值 var users = new Array(); //new 可以省略 ); //new 可以省略 var users3 = new Array( ...
- 第三方缓存软件memcached和redis异同
memcached和redis相同点:都是以键值对的形式来存储数据,通俗讲就是一个大的hashtable缓存数据都是存在内容中 key-value 不同点:memcached:1.一个key所对应的值 ...
- Spring课程 Spring入门篇 3-5 Spring bean装配(上)之Resource
课程链接: 1 resource简析 2 resource代码演练 1 resource简析 urlsource:url对应的资源 classpath:获取类路径下的资源文件 filesystemre ...
- JavaScript 中 call,apply 和 bind
call and apply 改变函数内部this的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数. function test() {} test() == test.ca ...