css 高度、宽度居中

原创 2016年08月31日 14:41:41


行内元素(又叫内联元素inline element):

①不占据一整行,随内容而定,有以下特点:

②不可以设置宽高,也不可以设置行高,其宽度随着内容增加,高度随字体大小而改变。

③内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用。

④也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用。

    常用的内联元素有

a - 锚点,b - 粗体(不推荐),br - 换行,em - 强调,font - 字体设定(不推荐),i - 斜体,img - 图片,input - 输入框,label - 表格标签,select - 项目选择,small - 小字体文本,span - 常用内联容器,定义文本内区块,strike - 中划线,strong - 粗体强调

 

块级元素block element:

①总是在新行上开始,占据一整行;

②高度,行高以及外边距和内边距都可控制;

③宽带始终是与浏览器宽度一样,与内容无关;

④它可以容纳内联元素和其他块元素。

    常用的块级元素有

div -最常用的块级元素,dl - 和dt dd搭配使用的块级元素,form - 交互表单,h1 - 大标题,hr - 水平分隔线,ol - 排序表单,p - 段落,ul - 非排序列表

互相转换:使用display设置可以使得行内元素拥有块级元素的特性,反之也可以。

如:

<p style="display:inline; text-align:center">我是被设置了内联的块元素p,我现在的表现形式和内联元素一样啦</p>

<span style="display:block; text-align:center">我是被设置了块级元素的span,我现在可以独占一行并且可以设置宽高</span>

display: table-cell ,能把元素当作表格单元来显示,这个非常实用,显示效果也很好,只可惜某些浏览器不够兼容。要注意,和一个合法的<td>元素必须在<table>里一样,

display: table-cell 元素必须作为 display: table 的元素的子元素出现。


文字水平居中使用:text-align:center;

文字高度居中使用:{  height: 56px;line-height: 56px;}

整个div居中{width:960px;margin:0px auto;}这种方法局限性太大,只有单行文本的元素才适用,所以在多行元素中是不能使用这种方法的


块元素水平居中:

一、相对定位法

原理是父类浮动的同时向左left:50%,而子类则向左浮动的同时left:50%;

<style type="text/css">
.centerlist {position:relative;left:50%;float:left;}
.centerlist li {position:relative;right:50%; z-index:2;float:left}
</style>
<ul class="centerlist">
    <li><a href="#">Lorem ipsum dolor.</a></li>
    <li><a href="#">Lorem ipsum dolor.</a></li>
    <li><a href="#">Lorem ipsum dolor.</a></li>
    <li><a href="#">Lorem ipsum dolor.</a></li>
    <li><a href="#">Lorem ipsum dolor.</a></li>
    <li><a href="#">Lorem ipsum dolor.</a></li>
    <li><a href="#">Lorem ipsum dolor.</a></li>
    <li><a href="#">Lorem ipsum dolor.</a></li>
    <li><a href="#">Lorem ipsum dolor.</a></li>
</ul>

二、强制内联

<span style="color:#000000;"><style type="text/css">
.centerlist_inline{text-align: center;}
.centerlist_inline li{display: inline;}
</style>
<ul class="centerlist_inline">
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
</ul></span>
局限:块级元素改为内联元素,那么高度、宽度、margin-top,margin-bottom, padding-top,padding-bottom,等都不能用。


vertical-align
初始值: baseline(缺省值)
可否继承:否
适用于: 内联元素
说明:vertical-align:baseline使元素的基线同父元素的基线对齐.
警告:vertical-align不能影响表格单元中的内容的对齐,对于块元素中的内容也一样.

请注意,vertical-align只影响内联元素,比如span,img,em,input,a等这些元素,而对div,h3,p等这些块元素是无效的.


相关文章:

CSS里的各种水平垂直居中基础写法心得分享(附内联元素,块级元素的基本概念)


css中水平垂直居中对齐布局一些实例总结


css3 解决未知高宽垂直居中的问题

常在absolute之后, 想让元素居中,都会采用margin-top:-[元素高度的一半]和 margin-left:-[元素宽度的一半] ,  但是当我们的元素宽高不是固定的时候, 这就难办...
  • sinat_32328353
  • sinat_32328353
  • 2016年08月02日 13:57
  • 440

CSS实现已知宽高的div垂直居中;自适应高度两列布局

最近笔试经常碰到这个题,平时写代码好像
  • pinger1225
  • pinger1225
  • 2014年09月19日 15:25
  • 1447

CSS----获取DIV的高度和宽度

 我用JS动态创建了一个DIV,用CSS定义了他的样式,包括了WIDTH和HEIGHT,但是用element.style.width得到的是“未定义”,查阅资料,应该用element.clientWi...
  • greymouseyu
  • greymouseyu
  • 2009年03月22日 23:52
  • 6602

轮播图 宽度自适应,可视区域小于1920时,图片水平居中

img100%宽度,最小宽度1920,浏览器可视宽度小于1920时让图片水平居中涉及的知识点:jq 获得可视区域宽度:$(window).width(), jq窗口检测事件:$(window).re...
  • turbman
  • turbman
  • 2017年09月22日 18:29
  • 348

css img标签高度等于宽度.

以下只是个人笔记,遇到的坑. 使用JS计算的话页面加载的时候会重新渲染, 导致闪屏,用户体验非常差.. 所以只能用CSS解决, 具体代码如下; {CSDN:CODE: } ...
  • lz305263
  • lz305263
  • 2016年04月29日 12:24
  • 544

设置div高度等于动态宽度

项目中有时候会遇到这个问题:一行有3个div,希望这3个div平分屏幕宽度,并且高度等于宽度。 第一个问题:平分屏幕宽度 可以对div设置百分比宽度,而不是直接用px宽度,这里用到了响应式设计的思...
  • WeLoveSunFlower
  • WeLoveSunFlower
  • 2015年09月18日 18:26
  • 6018

纯 CSS 实现高度与宽度成比例的效果

HTML: class="image-container"> src="xxx.png"> CSS: p.image-container { width: 100%; heigh...
  • sunfor
  • sunfor
  • 2015年06月17日 23:23
  • 14038

css 盒子水平居中(确定宽度和不确定宽度)

说到让一个div水平居中,立马想到最常用的就是margin:0 auto;但是这个的前提是必须知道盒子的宽度,盒子居中主要有两种情况: 一.确定盒子的宽度,解决办法有: 1.1 margin:0 ...
  • maoguiyou
  • maoguiyou
  • 2016年04月13日 10:19
  • 3031

用CSS来实现不定高度DIV绝对居中

一般来说,指定高度的DIV垂直和水平居中比较方便,而不定高度的话就稍微麻烦了点,我尝试了一下,通过2个辅助的DIV实现了绝对居中,兼容IE和FF等标准浏览器。 CSS代码: #wrappe...
  • axl19530209
  • axl19530209
  • 2015年02月14日 08:53
  • 389

纯 CSS实现根据元素已知的宽度设置高度以及注意事项

纯 CSS 根据宽度设置高度
  • DeepLies
  • DeepLies
  • 2017年08月16日 19:45
  • 523
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css 高度、宽度居中
举报原因:
原因补充:

(最多只允许输入30个字)