博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS 基础 例子 水平 & 垂直对齐
阅读量:5339 次
发布时间:2019-06-15

本文共 589 字,大约阅读时间需要 1 分钟。

一、元素居中对齐 margin:auto

  水平居中对齐一个元素(如 <div>),即div本身在容器中的对齐,用margin:auto,而且,需要设置 width 属性(或者设置 100%),否则,居中对齐将不起作用。

二、文本居中对齐 text-align:center

  文本在所在元素内水平居中对齐,可以使用 text-align: center;

 

三、图片居中对齐 margin:auto

  而且放在块元素中

 

 

 四、左右对齐-使用定位方式

  position: absolute; 属性来对齐元素,绝对定位会把元素从正常流中删除(不再占住位置),而且可以和其他元素交叠。

  没有使用绝对定位时候:

右对齐

以下实例演示了如何使用 position 来实现右对齐:

菜鸟教程 -- 学的不仅是技术,更是梦想!!

  运行结果:

  绝对定位:

五、左右对齐 - 使用 float 方式

 

六、垂直居中对齐 padding

七、水平和垂直居中对齐 padding + text-align:center

八、水平和垂直居中对齐-line-height + text-align:center

  行高和高要相等

 

转载于:https://www.cnblogs.com/shawnhu/p/8327863.html

你可能感兴趣的文章
Modal模态框scrolltop保留上次位移的解决方案
查看>>
python 函数(一)
查看>>
我说我在总结谁会信。。
查看>>
数据库索引的作用和长处缺点
查看>>
Laravel 安装代码智能提示扩展「laravel-ide-helper」
查看>>
java开发配套版本
查看>>
MySQL的 Grant命令权限分配
查看>>
非阻塞的c/s,epoll服务器模型
查看>>
YII框架安装过程总结
查看>>
HDOJ(HDU) 1862 EXCEL排序(类对象的快排)
查看>>
Codeforces Round #381 (Div. 2) 复习倍增//
查看>>
Money类型转化为String去除小数点后0解决方法
查看>>
ArcScene 高程不同的表面无法叠加
查看>>
[ONTAK2010] Peaks
查看>>
DLL 导出函数
查看>>
windows超过最大连接数解决命令
查看>>
12个大调都是什么
查看>>
angular、jquery、vue 的区别与联系
查看>>
参数范围的选择
查看>>
使用 MarkDown & DocFX 升级 Rafy 帮助文档
查看>>