css居中小技巧

时间：2021-11-27 03:36:50

一、行内元素-水平居中

　　在父元素的样式中添加：　

text-align:center;

二、定宽块级元素-水平居中

　　所谓定宽块级元素指块级元素的宽度指定，而不是默认的100%，否则此方法无效；

　　代码：

html:

<body>

  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>

</body>

css:

<style>

div{

    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

    width:200px;/*定宽*/

    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */

}

</style>

三、不定宽块级元素-水平居中

　　三种思路：

  1. 加入 table 标签，将这个table居中；
  2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置； 
    html:
    
<body>
    
<div class="container">
    
    <ul>
    
        <li><a href="#">1</a></li>
    
        <li><a href="#">2</a></li>
    
        <li><a href="#">3</a></li>
    
    </ul>
    
</div>
    
</body>

css:
    
<style>
    
.container{
    
    text-align:center;
    
}
    
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
    
.container ul{
    
    list-style:none;
    
    margin:0;
    
    padding:0;
    
    display:inline;
    
}
    
/* margin-right:8px（设置li文本之间的间隔）*/
    
.container li{
    
    margin-right:8px;
    
    display:inline;
    
}
    
</style>

    以上是例子代码。

  3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的；

四、父元素高度确定的单行文本-垂直居中

　　思路：设置父元素的 height 和 line-height 高度一致来实现。line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

　　　　height:该元素的高度；

　　　　line-height:行高（行间距），在文本中，行与行之间基线的距离。

　　注意：这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>垂直居中</title>

<style>

.wrap h2{

    margin:0;

    /*width:20px;*/  /*如果取消注释，则文本会显示在盒子外*/

    height:100px;

    line-height:100px;

    background:#ccc;

}

</style>

</head>

<body>

<!--下面是代码任务部分-->

<div class="wrap">

    <h2>hi,imooc!</h2>

</div>

</body>

</html>

五、父元素高度确定的多行文本-垂直居中

　　两个思路：

　　　　1.使用插入 table  (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

　　　　　　css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。

html:

<body>

<table><tbody><tr><td class="wrap">

<div>

    <p>看我是否可以居中。</p>

</div>

</td></tr></tbody></table>

</body>

css:

table td{height:500px;background:#ccc; vertical-align:middle;}

　　　　2.在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。

html:

<div class="container">

    <div>

        <p>看我是否可以居中。</p>

        <p>看我是否可以居中。</p>

        <p>看我是否可以居中。</p>

    </div>

</div>

css:

<style>

.container{

    height:300px;

    background:#ccc;

    display:table-cell;/*IE8以上及Chrome、Firefox*/

    vertical-align:middle;/*IE8以上及Chrome、Firefox*/

}

</style>

css居中小技巧的更多相关文章

  1. CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

    首页   登录注册         CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...

  2. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  3. 第八十四节，css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  4. css样式小技巧

    1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...

  5. 一些常用的html&sol;CSS效果---小技巧

    我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...

  6. html&sol;css&sol;js小技巧实例

    一些学习中碰到的小技巧 让div自动撑起来: .clearfix:after{ content: "."; clear: both; display: block; visibil ...

  7. CSS设置小技巧

    水平居中 对于元素的水平居中,有三种情况: 行内元素(文字.图片等):text-align: center; 定宽块状元素(有设置宽度的block元素):margin: 0 auto; 不定宽块状元素 ...

  8. 【温故知新】——CSS黑魔法小技巧可以少些不必要的js

    前言:这篇文章是转载[前端开发博客]的一篇技术文章,并非本人所写.只是个人觉得很实用,所以分享给大家.原文链接:github.com 1.利用 CSS 的 content 属性 attr 抓取资料需求 ...

  9. CSS调试小技巧 —— 调试DOM元素hover&comma;focus&comma;actived的样式

    最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的, ...

随机推荐

  1. MongoDB学习笔记~为IMongoRepository接口添加分页取集合的方法

    回到目录 对于数据分页,我们已经见的太多了,几乎每个列表页面都要用到分页,这已经成了一种定理了,在进行大数据展示时,如果不去分页,而直接把数据加载到内存,这简直是不可以去相向的,呵呵,在很多ORM工具 ...

  2. 20145330《Java学习笔记》第一章课后练习8知识总结以及IDEA初次尝试

    20145330<Java学习笔记>第一章课后练习8知识总结以及IDEA初次尝试 题目: 如果C:\workspace\Hello\src中有Main.java如下: package cc ...

  3. RTB

    RTB —— Real Time Bidding 的简称,就是实时竞价.跟传统购买形式相比,RTB是在每一个广告展示曝光的基础上进行竞价,就是每一个PV都会进行一次展现竞价,谁出价高,谁的广告就会被这 ...

  4. HDFS Architecture--官方文档

    HDFS Architecture Introduction The Hadoop Distributed File System (HDFS) is a distributed file syste ...

  5. juicer模板引擎使用

    http://www.juicer.name/ <script src="~/Scripts/jquery-1.8.2.min.js"></script> ...

  6. &lbrack;wxWidgets&rsqb;&lowbar;&lbrack;0基础&rsqb;&lowbar;&lbrack;经常更新进度条程序&rsqb;

    场景: 1. 非常根据程序的进展需要处理业务,以更新进度条,进度条的目的是为了让用户知道业务流程的进度.一个进度条程序更友好,让用户知道在程序执行.不是没有反应. 2. 现在更新见过这两种方法的进展. ...

  7. Comparer&lt&semi;T&gt&semi; IComparer&lt&semi;T&gt&semi; IComparable&lt&semi;T&gt&semi;

    Comparer<T>.Default Property Comparer<T>.Default doesn't use your FooComparer class. It ...

  8. JavaWeb基础—EL表达式与JSTL标签库

    EL表达式: EL 全名为Expression Language.EL主要作用 获取数据(访问对象,访问数据,遍历集合等) 执行运算 获取JavaWeb常用对象 调用Java方法(EL函数库) 给出一 ...

  9. 解决 openpyxl 垂直分页符和水平分页符同时添加的问题

    前言 十天前知乎上有人提问 python:openpyxl模块怎么给表格添加分页符?实现分页打印功能?,看到问题之后,我很快的给他了一个如何添加垂直分页符或水平分页符的示例,你以为问题就结束了?我是这 ...

  10. es6学习 1

    块级作用域绑定 一 var 声明及变量提升(Hoisting)机制 在函数作用域或全局作用域中通过 var 声明的变量,无论实际上是在哪里声明的,都会被当成在当前作用域顶部声明的变量,这就是我们常说的 ...

相关文章