三行CSS代码搞定垂直对齐
来源:互联网 发布:mysql exist的用法 编辑:程序博客网 时间:2024/04/30 12:34
.text p { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}.image img { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}.block-of-text p { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}@mixin vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}.mixin p { @include vertical-align;}/* ==================================== Base styling, to make the demo more fancy ==================================== */body { font-family: Helvetica Neue, Helvetica, sans-serif; background: #59488b; padding: 1em; -webkit-font-smoothing: antialiased;}h1, h2 { text-align: center; color: white; font-weight: 200; margin-top: 0;}h1 { margin-bottom: 0;}h2 { margin-bottom: 1em;}section { display: block; max-width: 500px; background: #433669; margin: 0 auto 1em; height: 140px; border-radius: .5em; color: white; img, p { padding: 1em; }}
Vertical align anything with just 3 lines of CSS
Published January 13, 2014 — A 2 minute read
发表于2014年1月3号— 短时阅读With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don’t know its height.
The CSS property transform is usally used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require you to either know the height of the element or only works on single-line text etc.
<h1>Vertical center with only 3 lines of code</h1><h2>(Excluding vendor prefixes)</h2><section class="text"> <p>I'm vertically aligned! Hi ho Silver, away!</p></section><section class="image"> <img src="http://placekitten.com/70/70"></section><section class="block-of-text"> <p> I'm a block of text! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quia doloremque tempora placeat officia ex obcaecati tenetur deserunt repudiandae praesentium.</p></section><section class="mixin"> <p>I'm being aligned with a mixin! At quia doloremque tempora placeat officia ex obcaecati tenetur deserunt repudiandae praesentium.</p></section>
So, to do this we write:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
That’s all you need. It is a similar technique to the absolute-position method, but with the upside that we don’t have to set any height on the element or position-property on the parent. It works straight out of the box, even in IE9!
To make it even more simple, we can write it as a mixin with its vendor prefixes:
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.element p {
@include vertical-align;
}
Or you can use the Sass placeholder selector to reduce code bloat in the output CSS:
%vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.element p {
@extend %vertical-align;
}
You can find a demo of it here:
Update (April 25th)
As a few people have pointed out, this method can cause elements to be blurry due to the element being placed on a “half pixel”. A solution for this is to set its parent element to preserve-3d. Like following:
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
0 0
- 三行CSS代码搞定垂直对齐
- 垂直居中对齐CSS代码
- 三行代码搞定天气预报
- 三行代码搞定天气预报
- css 非表格垂直对齐效果代码
- css垂直居中对齐
- CSS 垂直居中对齐
- 三行代码搞定vue中的markdown
- 三行Python代码搞定人脸识别
- 如何垂直居中对齐CSS
- 【XHTML&CSS读书笔记】垂直对齐
- css如何垂直居中对齐
- CSS label textarea 垂直对齐
- 三行代码搞定字符数组与字符指针的区别
- 三行代码实现div内元素垂直居中
- Eclipse设置代码垂直对齐
- 【css基础】文本对齐,水平对齐,垂直对齐
- 【css基础】文本对齐,水平对齐,垂直对齐
- Linux 下制作虚拟软盘镜像
- HDU 1863 并查集
- Spring RMI 超时(Timeout) 和 自动重连
- android拦截去电
- 转载:Linux环境进程间通信-共享内存
- 三行CSS代码搞定垂直对齐
- 逆转字符串 C语言
- dump函数
- nginx proxy_pass 里的”/”
- UVa-10474-Where is the Marble?
- java 面试分析
- android动态注册广播接收器
- 使用UncaughtExceptionHandler处理未catch到的异常
- adb服务启动失败