css 水平垂直居中 两端对齐
来源:互联网 发布:小学校园网络建设方案 编辑:程序博客网 时间:2024/05/12 20:51
单行垂直居中
单行垂直居中可以直接用line-height=width来做
<div style="width:100px;height:100px;line-height:100px;">
<span>hello world</span>
</div>
这样文本hello world便实现了垂直居中,如果想让整个div在父级元素中都居中,则在外面嵌套一层div,并且通过里面div的margin来实现
<div style="position:relative;width:400px;height:200px;">
<div class="element" style="width:50%;height:50%;line-height:100px;">
<span>hello world</span>
</div>
</div>
.element {
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto 0;
}
多行垂直居中
多行垂直居中的话用line-height就不行了。需要将div的display:table-cell,然后vertical-align:middle;
<div class="twoClass" >
你好时间你好时间你好时间你好时间
</div>
.twoClass{display:table-cell; width:200px; height:200px; vertical-align:middle;}
其实这种方法对于单行的垂直居中也是可行的。
水平居中
对于文本的水平居中,只要text-align:center;就可以了,如果将正个div居中,则需要将div的margin-left margin-right设为auto
<div style="position:relative;width:200px;height:200px;">
<div class="element" style="width:50%;height:50%;text-align:center;line-height:100px;">
你好时间
</div>
</div>
.element {
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto auto;
}
这个demo实现了div和文本的水平垂直居中。
两端对齐
对于多行文本的两端对齐,只需要text-align:justify就可以了
<div style="position:relative;width:100px;height:400px;text-align:justify;">
hello world he hello world你好世界你好世界你好世界, he hello world he hello你好世界你好世界你好世界, world he hello world he hello world he
</div>
值得注意的是这个多行文本的最后一行并没有两端对齐。
如果想对最后一行做操作,可以使用text-align-last: justify; 但是存在兼容性问题。
单行的两端对齐
<div style="width:400px;text-align-last:justify;">
我好帅
</div>
没想到一个text-align-last: justify;就实现了(chrome),但是在IE浏览器下并没有效果。。。
下面这个是从网上找的几个a标签两端对齐
.demo{
text-align-last:justify;
line-height:0;
height:44px;
}
.demo a{
width:20%;
display:inline-block;
height:44px;
line-height:44px;
text-align:center;
}
<p>模块内的元素之间为换行符</p>
<br />
<div class="demo">
<a class="link" href="#none">10元</a>
<a class="link" href="#none">20元</a>
<a class="link" href="#none">30元</a>
<a class="link" href="#none">50元</a>
</div>
<br />
<p>模块内的元素之间为空格符</p>
<br />
<div class="demo">
<a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a>
</div>
<br />
<p>模块内的元素之间为无分隔符,justify不起作用</p>
<br />
<div class="demo"><a class="link" href="#none">选项1</a><a class="link" href="#none">选项2</a><a class="link" href="#none">选项3</a><a class="link" href="#none">选项4</a></div>
- css 水平垂直居中 两端对齐
- CSS制作水平垂直居中对齐
- CSS制作水平垂直居中对齐
- CSS制作水平垂直居中对齐
- CSS制作水平垂直居中对齐
- CSS制作水平垂直居中对齐
- CSS制作水平垂直居中对齐
- CSS制作水平垂直居中对齐
- CSS制作水平垂直居中对齐
- CSS制作水平垂直居中对齐
- CSS 水平和垂直居中对齐
- CSS水平垂直居中
- css水平垂直居中
- CSS 水平垂直居中
- CSS水平垂直居中
- css水平垂直居中
- css水平垂直居中
- CSS水平垂直居中
- log4j2使用
- Java泛型浅析(一)
- orcle设置表中主键自增
- 通过AVFoundation框架获取摄像头数据
- 了解External Accessory Framework之EAAccessory
- css 水平垂直居中 两端对齐
- CoreText使用介绍
- CocoaPods 【LoadError - cannot load such file -- nanaimo】
- 51nod 序列变换 [容斥原理+莫比乌斯函数]【数论+组合数学】
- android Manager下载google servece play 出现Download interrupted: Unexpected HTTP Status 502
- GreenDAO
- play教程 第六课 play中的session
- 【初等概率论】 02
- 多图片上传预览