元素居中对齐

margin: auto;

文本居中对齐

text-align: center;

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到  元素中

左右对齐 - 使用定位方式

使用 position: absolute; 属性来对齐元素

左右对齐 - 使用 float 方式

我们也可以使用 float 属性来对齐元素

垂直居中对齐 - 使用 padding

一个简单的方式就是头部顶部使用 padding

垂直居中 - 使用 line-height

line-height: 200px; height: 200px;

CSS 布局水平 & 垂直对齐的更多相关文章

  1. CSS 布局 - 水平 & 垂直对齐

    CSS 布局 - 水平 & 垂直对齐 一.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘 ...

  2. CSS:CSS 布局 - 水平 & 垂直对齐

    ylbtech-CSS:CSS 布局 - 水平 & 垂直对齐 1.返回顶部 1. CSS 布局 - 水平 & 垂直对齐 水平 & 垂直居中对齐 元素居中对齐 要水平居中对齐一个 ...

  3. CSS实现水平垂直同时居中的5种思路

    × 目录 [1]水平对齐+行高 [2]水平+垂直对齐 [3]margin+垂直对齐[4]absolute[5]flex 前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的5种思路 ...

  4. CSS实现水平垂直同时居中的6种思路

    前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的6种思路 水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂直居中 <style ...

  5. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

  6. CSS制作水平垂直居中对齐 多种方式各有千秋

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

  7. CSS 基础 例子 水平 & 垂直对齐

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

  8. margin:-75px的理解及妙用——纯CSS制作水平/垂直都居中短边为50px/长边为150px的红色十字架

    有这么一个题目: 使用重构的方式制作出一个如下图的水平.垂直都居中短边为50px,长边为150px的红色十字架. 要求只使用2个div完成 答案: <!DOCTYPE html PUBLIC & ...

  9. css布局--水平垂直居中

    1. 使用text-align 和 vertical-align 和 inline-block实现水平垂直居中 html <div class="parent"> &l ...

随机推荐

  1. Python进阶学习之面向对象

    目录 面向对象 私有属性 面向对象   python也有面向对象的编程,它与C++中的类有点相似.它也只是运算符重载,继承. class Test: num=0 def __init__(self): ...

  2. 阅读GitHub源码的正确打开方式

    前言 近来发现阅读开源项目上手就整最新的代码不合适,缺少项目迭代的具体实现过程,想着若是可以看到针对问题的提交代码就好了,所以就有了本篇博客. 以文主要涉及:如何fork开源项目,如何保证本地仓库代码 ...

  3. oracle --游标详解(转)

    转自:http://blog.csdn.net/liyong199012/article/details/8948952 游标的概念:     游标是SQL的一个内存工作区,由系统或用户以变量的形式定 ...

  4. 如何配置 GitHub 为个人的手机图床

    PicPlus 是一个手机端的图床上传工具,支持七牛云.阿里云.又拍云等主流图床配置,同时还支持配置 GitHub.码云作为自己的图床,如下所示: 这篇文章主要介绍如何在 PicPlus 中配置 Gi ...

  5. python中可变长度参数详解

    1. *args用法:python会将所有位置的参数收集到一个元组中 2. **args用法:python会将关键字参数传递给一个新的字典.**允许将关键字参数转换为字典 用法见如下代码: def f ...

  6. 1. chromedriver的下载和配置

    使用selenium时,需要用到不同浏览器的driver. 我常用chromedriver,所以先记录chromedriver的使用和配置.其他浏览器的driver配置大同小异. 一. 确定浏览器的版 ...

  7. C# 在DataGridView中,点击单元格调出 TreeView控件 或 ListBox控件

    1.调出 TreeView控件 或  ListBox控件 private void deductGrid1_CellClick(object sender, DataGridViewCellEvent ...

  8. python中使用openpyxl模块时报错: File is not a zip file

    python中使用openpyxl模块时报错: File is not a zip file. 最大的原因就是不是真正的 xlsx文件, 如果是通过 库xlwt  新建的文件,或者是通过自己修改后缀名 ...

  9. 如何在Linux系统上安装nginx

      安装Nginx 下载Nginx 到官网http://nginx.org/下载对应nginx包,推荐使用稳定版本进入官网之后界面如下 点击download进行到下一页 然后下载所需要的版本(强烈建议 ...

  10. Java进阶之心态

    不管什么时候学习都是一个积累的过程,量变才能引起质变.一口吃一个胖子是不存在的,成长的路上没有捷径,只有学到的知识才是我们走向远方道路的基石!