精华内容
下载资源
问答
  • 目录居中对齐的原理无法居中对齐的原因 居中对齐的原理 line-height可以理解成每行文字所占的高度。他的标准定义每行文字基线与基线的距离。 例如,有一行20px大小的文字,如果设置为line-height:50px,那就是说,...

    居中对齐的原理

    line-height可以理解成每行文字所占的高度。他的标准定义是每行文字基线与基线的距离。

    例如,有一行20px大小的文字,如果设置为line-height:50px,那就是说,这行文字的高度会占50px。

    显然,每个字的大小只有20px,于是浏览器就把多出来的30px(50px-20px)在这行文字的上面加上了15px,下面加上了15px。

    这样的话,那文字就在这50px的空间内是居中的了(这个就是浏览器规定的,它就这个分配空间)。

    这样的话,如果你的DIV是50px,正好这行文字也就相对于DIV居中了。

    所以把line-height设置为容器div的高度就能使文字垂直居中


    无法居中对齐的案例

    案例一:font简写

    height: 40px;
    line-height: 40px;
    font: 16px bold;
    background: #e4393c;
    color: #fff;
    

    问题攒的多了,我自己的例子丢了~好气

    不过在网上找了一个例子,发现真的没居中~

    经过我的尝试,在Chrome浏览器中的结果是:

    font的简写形式就是不居中~

    而采用他的常用写法font-size:16px

    就可以居中啦~

    如下:

    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight:blod;
    background: #e4393c;
    color: #fff;
    
    展开全文
  • 比如: <div> <div> </div> </div> 想让子div在父div中水平居中对齐,如果在css中写 div { text-align: center; }的话在ie中浏览没有问题,但在firefox中依然左对齐。 所以必须再加一个样式 div div { margin-left:...
  • 浏览器支持 所有浏览器都支持 line-height 属性。 这就奇怪了,既然支持为什么居中呢? 解决这个问题可以用pading设置上下填充,但是如果文本框有背景图片的话就会向下... 但为什么会出现不居中,实在搞不明白。
  • import sys import random reload(sys) sys.setdefaultencoding('utf-8') 案例一 使用ljust()方法左对齐,其中括号内可以接受两个参数,...rjust()右对齐,center()是居中对齐,说教无益,上代码。 data_t...
    import sys
    import random
    reload(sys)
    sys.setdefaultencoding('utf-8')
    

    案例一

    使用ljust()方法左对齐,其中括号内可以接受两个参数,字符串长度和用什么填充,比如ljust(10,’-’)就是10个长度,剩余的地方用符号-来填满。

    rjust()是右对齐,center()是居中对齐,说教无益,上代码。

    data_text='langzi'
    print data_text.ljust(20,'-')
    print data_text.rjust(20,'-')
    print data_text.center(20,'-')
    

    运行结果:

    langzi--------------
    --------------langzi
    -------langzi-------
    

    当然也可以用在打印迭代对象的时候居中对齐,但是要注意的是,对齐的对象必须要是字符串形式,如果是数字形式的话,就要转换成字符串的格式。

    li=['A','B','C','D']
    for x in li:
    	print x.center(20,'-')
    

    运行结果:

    ---------A----------
    ---------B----------
    ---------C----------
    ---------D----------
    

    案例二

    使用format方法同样可以实现对齐,语法稍有不同,<20左对齐20个长度,>右对齐,^居中对齐。

    print format(data_text,'<20')
    

    运行结果:

    langzi       
    

    一般来说用的最多的还是打印字典的时候,字典的键不一样,导致输出的结果不美观,使用此方法可以解决本问题。

    data_dic={k:random.randint(1,20) for k in ('xiaotaohong','chenyanqin','zhaotiaogeng')}
    for k,v in data_dic.iteritems():
        print k.ljust(20) + ' : ' + str(v)
    

    运行结果:

    xiaotaohong          : 4
    zhaotiaogeng         : 16
    chenyanqin           : 19
    

    个人博客:www.langzi.fun
    欢迎交流Python开发,安全测试。
    欢迎关注公众号:【安全研发】获取更多相关工具,课程,资料分享哦~
    在这里插入图片描述

    展开全文
  • 本人刚入门,请教做成图中这个样子的思路是什么,是把所有lable和input分成两个块,然后对块进行绝对定位吗?我什么都试过了,就是做不出来,可能是某些点理解不够透彻,求思路,求代码!![图片说明]...
  • 我使用以下代码动态的生成了 RadioButtons: RadioButton radioButton=new RadioButton(context); LayoutParams layoutParams=new ...我用什么方法可以把所有的按钮按竖排排列,并都居中对齐呢?
  • 关于图片居中对齐的问题,进入前端行业虽然有一段时间了,以为自己懂了,可是实际上还是一知半解,找了一些博客来看了一下,但是感觉讲的有点碎,看完还是一知半解。 查阅了一下《css权威指南》,结合遇到的问题,...

    关于图片居中对齐的问题,进入前端行业虽然有一段时间了,以为自己懂了,可是实际上还是一知半解,找了一些博客来看了一下,但是感觉讲的有点碎,看完还是一知半解

    查阅了一下《css权威指南》,结合遇到的问题,这才了解到前前后后的问题根源。

     

    主要的问题如下:

    1.line-height是个什么东西,范围在哪里,具体应用于什么元素?

    2.vertiacal-alignline-height有什么关系,元素对齐到底是一个什么样的过程。

    3.图片对齐和文本对齐有什么区别?

    4.浮动元素为什么对齐会出现问题?

    -------》解答这些问题,牵涉的碎片化知识:

    基线,底端,行内框,行框,行距,替换元素及非替换元素,对齐

    下面围绕着上面的三个问题,以及相应的碎片化知识点来进行解析问题。

    一般来说,之所以不了解vertical-align,是因为不清楚对齐后面的这些碎片化知识,而这些也是很多博客在解析的时候常常忽略的地方。

     

    先说结论:

    1.line-height是行高,主要作用是在文本上下行间距,基于文本产生影响文本元素位置的作用,对于行内元素的位置影响显著,但是对于块元素的影响甚微。

     

    2.vertical-alignline-height的关系是:line-height是vertical-align的对齐依据。vertical-align主要是影响行内元素的对齐,不影响块元素布局

    而决定行内元素对齐的有两个因素,1.元素本身的height(类似于图片和按钮等替换元素)2.还有其他spanem非替换元素的line-height。行框通过计算heightline-height,来将各个行内元素与行内的基线进行对齐。

    但是当产生浮动的时候,浮动会对行内元素的布局产生特殊影响,因此不会按照原先的方式来进行对齐,此时设置了vertical-align往往没有效果

     

    3.图片的对齐是将自己的底端,也就是图片的最下端与行框的默认基线进行对齐,对齐依据是底端影响图片对齐的依据是图片的heightpaddingborder大小。

    而文本元素,例如<span>文本内容</span>,则是将自身的行内框基线与行框基线进行对齐,对齐依据是基线。影响行内文本元素的依据是line-height,以及元素自身的font属性。

     

    4.元素浮动之后实际上是从正常的文档流中除去了(因此会出现高度塌陷,父容器收缩的问题),但是同时又对文档产生着影响(最经典的就是环绕效果)。元素浮动类似于一个被除名的黑户,虽然不在土地登记簿上,但是的的确确占用一块地方,因此别的元素也不能因此占据浮动元素的空间,但是因为是黑户,所以别的元素会环绕它,好像它不存在一样。

    元素浮动之后,会尽力往容器的左右两侧移动,尽可能地“漂”到容器的最高处。

     

    因此此时行内元素浮动之后,浮动的规则会覆盖vertical-align的规则,这个时候设置vertical-align往往会出现问题,最典型的就是对一个段落中的图片进行浮动,然后设置vertical-align,但是发现往往不起作用。

     

    但是文本元素浮动之后往往不会受到影响,因为line-height实际上还是作用于文本元素的,虽然文本元素的容器位置“漂”到其他位置,但是里面的文本因为line-height,仍然有行高,可以影响到行内元素的布局。

     -------------------------------------------------------------------------------------------------------------------------------------------------

     ------------------------------------------------我是分割线---------------------------------------------------------------------------------------

     -------------------------------------------------------------------------------------------------------------------------------------------------

    结论如何推导出来

    看完这些结论,想必很多人也是一时之间有些不明白所以然,因为不同的人掌握的背景知识是不同的,而这些结论的关键恰恰是这些关键性的碎片化知识,它们起到了穿针引线的作用。下面来梳理一下,到底是怎么得出结论的。

     

      -------------------------------------------------------------------------------------------------------------------------------------------------

     ------------------------------------------------我是分割线--------------------------------------------------------------------------------------- 

    ---------------------------------------------------------------------------------------------------------------------------------------------------

     

    1.核心问题:关于对齐

    对齐涉及到两个对象,要对齐元素及对齐对象,一个对象是不可能对齐。比如平常在战队,从高往低对齐,每个人都要有一个参考系,对着参考系进行对齐。

    而行内元素的对齐,除了行内元素本身,还有一个参考系,这个参考系就是行框的基线,而行框的基线依据于行内框元素的基线位置。

     

    1.1对齐延伸问题:什么是基线?

    每一个文本元素自身都会有四条线,顶线,中线,基线,底线。而基线一般是指文本元素中以x字母为准,x字母的下边缘为该文本元素的基线。

    而行高则是两个文本行基线之间的距离,往往使段落产生间距。

    但是也可以这样理解,行高 = 字体大小 + 上半行距 + 下半行距(其中上下半行距相等,这个等式可以从图中推导出来)

     

    每一个文本元素和文本行元素,都会有一条基线,基线的位置受到文本的字体格式以及line-height的影响。

     

     

    1.2对齐延伸问题:什么是行框和行内框?

     

    在每一个段落行内,不同的行内元素除了包裹自身内容的内容框之外,还会自动生成一个行内框,其中没有标签包裹的文本会生成匿名行内框,不同的行内框会根据各自不同的line-height产生行间距,而行框则会刚好包括最高的顶端和最低的底端,从而来生成行框。

     

     

    行内框的基线很好计算,但是行框的基线如何计算呢?

    行框的基线是立足于行内框中基线最低的元素,也就是line-height最大的文本元素

     

     下面的例子,可以测试出来,当设置其中一个行内文本元素的line-height超过其他行内元素的line-height的时候,整个容器会自动扩展,位置也会往下移动。

    <!DOCTYPE html>
    
    <html lang="zh-cn">
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>测试行框基线</title>
    
    <style>
    
    p{border:1px solid red;line-height:20px;}
    
    span{line-height:40px;} /*可以在浏览器中取消一下,观察一下位置变动*/
    
    </style>
    
    </head>
    
    <body>
    
    <p>
    
    <span>文本内容1</span>   匿名文本内容    <em>文本内容2</em>   <img src="" alt="">
    
    </p>
    
    </body>
    
    </html>
    

      

     

     

    1.3对齐延伸问题:什么是替换元素。

    替换元素是指元素的内容本身并非文档直接表现的,换句话说,就是不同的页面中,浏览器不能确定其具体内容的元素,比如图片,按钮,因为图片的内容取决于图片引用的src属性源,按钮的类型则依据于其input类型,因此浏览器是不能确定今天img元素里面是一张美女图片,那么明天加载的页面里面img是不是一张美女图片。

     

    除了替换元素,其他的元素就是非替换元素。非替换元素和替换元素在行框中的影响,主要是其高度计算方式,替换元素在行框中的位置是由其heightpaddingborder来决定,而非替换元素在行框中的位置则是其line-height和字体样式。

     

     

    1.4对齐延伸问题:图片等替换元素在行框中有什么影响。

    如果只有文本元素的话,那么行框是很好计算基线位置的,但是如果有图片按钮等替换元素的话,那么计算方式就会变的稍微复杂一些。

    css中,有两种高度方式,一种是height,一种是line-height,这两种会决定元素的高度和位置,对于图片等行内替换元素来说,height是行框计算的依据,line-height对图片、按钮不会产生影响。

    因此,如果有图片在行内的话,那么图片的底端会对齐文本的基线。

     

    那么,如果图片的高度高于其他行内框的整体高度,这个时候会发生什么呢?

     

    图片会在对齐原来的行框文本基线的基础上,撑开高度,使行框最高点刚好包括图片的顶端。

    因此,当p段落里面的line-height都是40px的时候,加入图片之后,行框的高度就会比没有加入图片之前多50px - 40px=10px高度,因此基线就会下移10px的高度。

    <p style=”line-height:40px;”>
    
    <span>文本内容1</span> <em>文本内容2</em> <img src="img/img2.png" height="50px" width="50px" alt="高度图片">
    
    </p>

     

     

    1.5对齐延伸问题:浮动对行内元素产生了什么样的影响。

    设置一个元素的浮动之后,元素会从正常的文档流中去除,但是同时也会对原来的文档流产生一些影响。

     

    可以设想一下,在长方形区域的水面上,有很多人都想要有一个固定位置的水床(浏览器盒模型布局),但是固定水床需要登记(告诉浏览器的如何布局计算)。突然有一天,有一个人想要在长方形区域的最左侧建一个水床(设置元素左浮动),它悄悄地从水底移动到最左侧,把原先的水床挤走(浮动元素会尽可能移动在到容器最高处,及最左处或最右处),在最左侧那里建了一所水床,没有登记(没有告知父容器高度,因此产生高度塌陷)。其他的人不知道,在去最左端的固定水床的时候,发现已经有人固定了,因此只能固定在它旁边(浮动会产生环绕效果,而这一点就是因为浮动元素从正常文档流中去除掉的原因)。

     

    图片是属于替换元素,在行框中的计算中,是依据于图片的高度,如果图片进行浮动的话,对于行框来说,图片不存在了,因此,行框还是依据原来的文本行基线来计算基线,进行对齐。

     

    因此,效果如下

    <p style=”line-height:40px;”>
    
    <span>文本内容1</span> <em>文本内容2</em> <img src="img/img2.png" height="100px" width="100px" alt="高度图片">
    
    </p>
    

      

    图片没有浮动:

     

    图片左浮动:

     

     

    没有图片:

     

     

    2.对齐的过程

     

    行内元素是默认设置的vertical-alignbaseline,也就是基线对齐。当一个文本行开始渲染的时候,

    1.首先浏览器会找出每一个元素的类型,是替换元素还是非替换元素

    2.然后根据它们的height或者line-height以及字体大小来生成每个元素行内框

    3.确定行内框基线位置,确定行框基线位置

    4.根据每个元素是否设置vertical-align来进行对齐。

     

    3.关于居中对齐

    vertical-alignmiddle是将元素行内框的中点与父元素基线上方0.5ex处的一个点对齐,这里的1ex相对于元素的font-size来计算x字母的高度,1ex等于该字体下x的字母高度。

    多数浏览器会将1ex处理为0.5em,也就是0.5倍字体大小font-size

     

     

     参考文档:

    《css权威指南》

    张鑫旭文章:《css行高line-height的一些深入理解及应用

     

    原创文章,转载请注明地址!!!

    转载于:https://www.cnblogs.com/doctor-chen/p/6049374.html

    展开全文
  • 2010年07月21日 星期三 20:11 垂直居中对table来说小菜一碟,只需指定单元格为vertical-align: middle即可,但这在css布局中不管用。... 兼容FF、IE的图片居中对齐方法; .aaa { height: 120px; ...

     

    2010年07月21日 星期三 20:11

    垂直居中对table来说是小菜一碟,只需指定单元格为vertical-align: middle即可,但这在css布局中不管用。假设你将一个导航菜单的高度设为2em,然后在css中指定垂直对齐的规则,文字还是会被排到盒的顶部,根本没有什么区别。

    兼容FF、IE的图片居中对齐方法;

    .aaa {
    height: 120px;
    width: 120px;
    border: 1px solid #009933;
    display: table-cell;     vertical-align:middle;           /* FF中图片垂直居中 */
    text-align:center;
    }
    .aaa img {
    vertical-align:middle;
    margin-top: expression((120-this.height)/2);           /* IE中图片垂直居中 */
    }

    在div中,文字对齐很好解决,不过图片垂直居中就有点难度了。。。解决文本垂直居中 ,一个line-height 就解决了, 例如:

    .div { width: 500px ; height : 200px ; line-height : 200px; background : #F4E9FC;}

    图片居中问题 ,这个方法还可以,IE 里浏览正常,不过火狐就不支持了,因为用了 expression例如: css代码如下:

    div1 { width: 500px; height: 500px; background : #F4E9FC; text-align: center;}
    .div1 img { margin-top: expression((500-this.height)/2); }

    html中:

    <div class="class1">< img src="图片路径" /></div>

    /*非IE的主流浏览器识别的垂直居中的方法*/

    <style>
    .box {
    /*非IE的主流浏览器识别的垂直居中的方法*/
    display: table-cell;
    vertical-align:middle;
    /*设置水平居中*/
    text-align:center;
    /* 针对IE的Hack */
    *display: block;
    *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
    *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
    width:200px;
    height:200px;
    border: 1px solid #eee;
    }
    .box img {
    /*设置图片垂直居中*/
    vertical-align:middle;
    }
    </style>

    转载于:https://www.cnblogs.com/hsapphire/archive/2010/09/29/1838133.html

    展开全文
  • 我以前一直都搞不清楚水平居中与垂直居中,更不用谈什么对齐,临时抱佛脚,也找不到很好的答案,于是把网上的代码研究了... 如果宽度是100%,对齐是没有效果的,要给居中的元素一个宽度,否则无效。 加入margi...
  • 昨天在论坛里溜达的时候,发现有同学遇到了居中的问题,页面在IE里居中对齐好好的,为什么在其他浏览器里面就不灵了呢?我曾经也在写一个JS日历的时候也被居中弄的焦头烂额,苦不堪言。想必不少人都遇到过这个问题吧...
  • 纯CSS实现文字一行居中,多行左对齐的方法其实这种需求还是蛮常见的。主要用于产品列表页面,用于产品图片下面,显示产品的名称。但是其纯CSS实现实在烧脑,一般就放掉这个需求,或者,使用JS实现。但是,我坚信这...
  • <div><p>Original ;...对于以背单词为主的人可能没什么影响,但是对文字量大的题库来说,视觉效果的影响我觉得还是蛮大的。</p><p>该提问来源于开源项目:helloworld1/AnyMemo</p></div>
  • CSS的文字对齐是一个重要的属性 ,对于我们前端开发当中具有重要意义 ,我们可以理解为是一个盒子 。 把一个盒子里面的文字对齐 ,而不是这个盒子对齐 ,是通过text-align属性对齐的,可以设置为居中向左或者向右三...
  • 可以看到我的公式中序号并不上下对齐,可以先用其它正文部分格式刷一下即可 3.选中序号部分:段落 -在这里插入图片描述 点击制表位 用到前面说过的标尺 再在公式前面进行相同操作 全部设置完毕后会发现并...
  • AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐。 AbsMiddle 图像的中间与同一行中最大元素的中间对齐。 Baseline 图像的下边缘与第一行文本的下边缘对齐。 Bottom 图像的下边缘与第一行文本的下边缘...
  • 它旁边一个可滚动的文本墙,我总是希望在页面加载时与固定图像的顶部垂直对齐.如此处所示(红色条表示它如何最高的):现在,如代码片段所示,我有右侧div与填充顶部:60px适用于我的电脑屏幕.但第二次我切换到手机或...
  • 在设置CSS样式的时候,我们常常设置行高为元素的高度,这样一来,文字就可以在这个元素里面垂直居中了,那这什么呢?今天就来分析原理。 首先,一行文字有顶线、中线、基线、底线、行高。 当你...
  • 纯CSS实现文字一行居中,多行左对齐的方法其实这种需求还是蛮常见的。主要用于产品列表页面,用于产品图片下面,显示产品的名称。但是其纯CSS实现实在烧脑,一般就放掉这个需求,或者,使用JS实现。但是,我坚信这...
  • 我在表格table的td中又嵌套了一个table,但是table中的东西会呈现垂直居中的状态,那么问题是什么,是其table继承了vertical-align: inherit属性 vertical-align 属性设置元素的垂直对齐方式。 所以,当我们不想使...
  • div居中及其原理

    2017-11-12 02:16:00
    CSS中:margin:auto与margin:0auto;有什么区别?...但结果都一样页面居中对齐,我想知道哪种写法更标准。 1.看下css手册,margin后跟四个参数:toprightbottomleft还可简写为两个参数即为上下左右也可以...
  • CSS Code复制内容到剪贴板 .link { padding-top: 30px; padding-bottom: 30px; }  居中一直CSS中被抱怨的典型... 你可以让他相对父级块级元素居中对齐  CSS Code复制内容到剪贴板 .center-children {
  • 居中一直CSS中被抱怨的典型。为什么实现起来这么辛苦?所以有人被嘲笑。我觉得问题不是没有办法做到,只是视情况而定,有很多不同方式,但是很难弄清楚应该用何种方式。... 你可以让他相对父级块级元素居中对齐

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 227
精华内容 90
关键字:

居中对齐是什么