关于div的居中的问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-01-11)
div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果。
1. div水平居中:设置margin的左右边距为自动。
div2 {3 margin:0 auto;4 }
2. div中的元素居中
2.1 div中的文字居中:将div的行高设置跟其高度一样的值。
div2 {3 height:200px;4 line-height:200px;5 }
2.2 div中的图片居中,方法一:将div的行高设置跟其高度一样的值,将其中的图片img外套上标签i,设置i和div同时垂直居中
div 2 { 3 width: 200px; 4 height: 200px; 5 line-height: 200px; 6 vertical-align: middle; 7 8 } 9 div i10 {11 vertical-align: middle;12 }
2.3 div中的图片居中,方法二:将div转换成tablecell,让后设置vertical-align属性居中。
div2 {3 width: 200px;4 height: 200px;5 display: table-cell;6 vertical-align: middle;7 background-color: Gray;8 }
关于div的居中的问题的更多相关文章
- 左边图标右边文字,在div里居中
- 绝对定位的DIV绝对居中显示
绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...
- HTML5:footer定位(底部+居中)的探讨+div图片居中问题
初学HTML+CSS布局,尝试自己写一个百度首页,可是footer的定位遇到麻烦而且百度没有好的解决方法,在此记录下逐步的过程.记录之,备忘. 初学,解决方法难免出现不妥之处,也请看到这篇文章的前辈指 ...
- 用CSS让DIV上下左右居中的方法
转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...
- div居中与div内容居中,不一样
1.div自身居中 使用margin:0 auto上下为0,左右自适应的css样式. 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠 ...
- css 如何使图片与文字在div中居中展示?
1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...
- jQuery实现的浮动层div浏览器居中显示效果
本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果.分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery <script type="text/java ...
- css:子元素div 上下左右居中方法总结
最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...
- img在div中居中的问题
Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中:(有的设计师为图片再加个div标签,然后通过 ...
- css div上下左右居中
相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设 content 要在f里上下左右居中 <div class= ...
随机推荐
- centos6 下安装xfce+vnc
CentOS 安装图形界面的过程,简单记录一下.这里提供了两种图形界面的安装,分别是CentOS自带的gnome桌面及轻巧的xfce.据测试,我的精简版CentOS 6 64位系统安装gnome需要下 ...
- 内容在某div中滚动
1.设定外层div在屏幕中的高度. 2.设置div刷新style="-webkit-overflow-scrolling: touch; overflow: scroll“
- poj 3270(置换群)
题意:给定n头母牛的脾气大小,然后让你通过交换任意两头母牛的位置使得最后的母牛序列的脾气值从小到大,交换两头母牛的代价是两个脾气之和,使得代价最小. 分析:以前做过一道题,只有一个地方和这道题不同,但 ...
- ActiveMQ之二--JMS消息类型
1.前言 //发送文本消息 session.createTextMessage(msg); //接受文本消息 public void onMessage(Message msg) { TextMess ...
- 淘宝API开发(三)
自动登录到淘宝定时获取订单: C#控制台程序 第一步,获得淘宝真实登录地址.淘宝授权地址(https://oauth.taobao.com/authorize?response_type=token& ...
- ps制作哈7海报字体
模仿也需要较强的功底和分析思路.如下面的教程,作者模仿的是电影海报字.文字构造虽不复杂,不过思路不对的话就容易走弯路.最终效果 1.先来分析文字的构造,大致由两部分组成,一部分是浮雕字,另一部分是质感 ...
- Android学习笔记-Dialog详解
1.对话框的使用 1.1AlertDialog的显示 简单对话框以及监听的设置:重点掌握三个按钮(也就是三上单词): PositiveButton(确认按钮);NeutralButton(忽略按钮) ...
- 原生JS取代一些JQuery方法
1.选取元素 // jQuery var els = $('.el'); // Native var els = document.querySelectorAll('.el'); // Shorth ...
- jquerymobile,手机端click无效
1.直接把<script>放到html代码后面,不要放到@section里面. 2.使用代理.如下所示: <script type="text/javascript&quo ...
- Visual Studio Profiler 跟踪检查每个exe dll 性能 执行时间 CPU占用情况的方法