精华内容
下载资源
问答
  • 实现Div层里的文字垂直居中的方法 有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为...

    实现Div层里的文字垂直居中的方法   有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用的div文字垂直居中的方法。
         首先要知道css里vertical-align无效,W3C官方对vertical-align做了下面的解释: “ This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.” 
        
         实际上,一个Box中由很多行很多元素组成,vertical-align只作用于在同一行内的元素,它的垂直并不是相对于整个Box而言的。前面定义了一个60px的高度,但是这个Box中存在很多行,那段文本并不能对齐到中央。因此希望那段文本对齐中间,需要给它定义一个line-height的属性,让line-height为60px,作用于一行的vertical-align就可以工作了。   

        如果是单行文字想垂直居中,只要保证div高和行高保持一致,就可以了。用下面的代码即可实现:

    CSS代码:
    #div-a{
    height:60px;
    line-height:60px;
    }

    XHTML代码:
    <div id="div-a">
     
    div 文字 垂直居中

    </div>

     

        如果还想让div里的文字水平居中,加上“text-align:center;”即可;代码如下:

    CSS代码:
    #div-a{
    text-align:center;
    height:60px;
    line-height:60px;
    }

    XHTML代码:
    <div id="div-a">

    css div 文字 垂直居中 
     div css 文字 水平居中

    </div>

         说明:如果在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto; MARGIN-LEFT:auto;”。

        但是,如果是多行文字,上面的垂直居中的方法就不行了,得用变通的方法实现;这里建议使用table方法,在table外面再套上相应的div,代码如下:

    <table>
    <tr><td style="vertical-align:middle;height:300px;background-color:red">

    居中的方法
    </td></tr>
    </table>

        多行文字居中还有另外一种方法:

    多行内容居中,且容器高度可变,也很简单,给出一致的 padding-bottom 和 padding-top 就行:

    .middle-demo-2{
    padding-top: 24px;
    padding-bottom: 24px;
    }

        优点:
    1. 同时支持块级和内联极元素
    2. 支持非文本内容
    3. 支持所有浏览器
        缺点:
    容器不能固定高度(参考)

        如何使图片在DIV中垂直居中,可以用背景的方法。如下:

    body{
    BACKGROUND:url(http://www.jeecn.com ) #FFF no-repeat center;

         关键就是最后的center,这个参数定义图片的位置。还可以写成“top  left”(左上角)或者"bottom right"等,也可以直接写数值"50 30"

    展开全文
  • 移动端 文字垂直居中

    2020-04-17 22:37:03
    但是在移动端查看网页就会发现line-height = height 并不能很好的解决文字垂直居中,总是存在偏差 是因为line-height = height 是pc端的垂直居中 移动端还是需要借助 flex 布局 display: flex; align-items: ...

    一般文字垂直居中想到

    line-height = height

    但是在移动端查看网页就会发现 line-height = height 并不能很好的解决 文字垂直居中,总是存在偏差

    是因为 line-height = height 是pc端的垂直居中

    移动端还是需要借助 flex 布局

    display: flex;
    align-items: center;

    即可~

    展开全文
  • 网页中图片和文字垂直居中分布

    千次阅读 2017-03-29 21:49:52
    如果知道图片的高度,垂直居中可以在外层样式加padding样式,如果图片高度不知道的情况,又怎么做呢? 工具/原料 做网页的工具都行 ,比如:Dreamweaver,Aptana Studio,EditPlus等,记事本也

    前端排版的时候,常常会碰到图片在一个区域在正中间,水平居中很容易做到,外层样式用{text-align:center}就可以水平居中;如果知道图片的高度,垂直居中可以在外层样式加padding样式,如果图片高度不知道的情况,又怎么做呢?



    工具/原料

    • 做网页的工具都行 ,比如:Dreamweaver,Aptana Studio,EditPlus等,记事本也可以。

    方法/步骤

    1. 在这里我用的是EditPlus,双击打开

      html 图片和文字垂直居中显示
    2. 点击左上角,文件》新建》html网页

      html 图片和文字垂直居中显示
    3. 在图片标签<img src="xxx" />之前加一个行内元素,比如加个<span></span>就行了。

      html 图片和文字垂直居中显示
    4. 给外层div加上text-align:center;

      给span的样式display:inline-block;height:100%;vertical-align: middle;

      给图片加上vertical-align: middle;

      html 图片和文字垂直居中显示
    5. 显示结果

      html 图片和文字垂直居中显示
    6. 6

      文字居中 设置行高line-height等于外层的高度就行了。

      END

    注意事项

    • 图片的大小不能大于外层div的大小,所以最好给图片加上max-width,max-height样式。
    展开全文
  • css不提供单行文字垂直居中功能 但是可以用小技巧使它垂直居中。 让高度和文字行号相同。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...

    css不提供单行文字垂直居中功能
    但是可以用小技巧使它垂直居中。
    让高度和文字行号相同。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .div1{
                height: 40px;
                line-height: 40px;
                background-color: red;
                /* 相同居中 */
            }
            .div2{
                height: 40px;
                line-height: 30px; 
                background-color: red;
                /* 小于居上 */
            }
            .div3{
                height: 40px;
                line-height: 50px;
                background-color: red;
                /* 大于居下 */
            }
        </style>
    </head>
    <body>
        <div class="div1">1</div>
        <br/>
        <div class="div2">2</div>
        <br/>
        <div class="div3">3</div>
    </body>
    </html>
    

    居中,上,下

    展开全文
  • div相对于页面水平居中显示: 核心代码:margin:0 auto; /意思为:div的外边距上下为0px,左右居中显示;/ /前提是position为相对定位;不能为absolute绝对定位/ **绝对定位:**是脱离文档流,所以margin无效;它是一...
  • div内文字垂直居中

    千次阅读 2011-10-08 14:41:49
     有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用的div文字垂直...
  • 网页中如何将文字和图片垂直居中 如果在进行网页编写的过程中,发现无论如何调整文字的CSS代码都无法将其垂直居中,这时我们就需要考虑是不是其他元素没有居中导致的视觉误差,这里记录一次由于图片没有垂直居中导致...
  • 网页css自适应高度下垂直居中文字

    千次阅读 2018-08-01 19:34:42
    网页css自适应高度下垂直居中文字 1、关于css自适应高度下垂直居中文字,非定位类的方法实现 : 分析:使用vertical-align方法可以使元素垂直居中,但是只是针对支持vertical的元素,如table 、td 等,div和span...
  • 垂直居中,3.水平垂直居中下面代码视图层统一代码结构:<div class="father"> <div class="son"></div> </div>1.水平居中:应用场景:整体网站居中,文字排版居中css代码:.father{ ...
  • 当定义了 Text 的 height 属性时,在 Text 中输入的文字都不是垂直居中的,不过你可以添加CSS来控制它,让输入的文字垂直居中,使网页更完美。 复制代码代码如下: <html> <head> <style type=”text...
  • 有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用的div文字垂直居中...
  • div相对于页面水平居中显示: 核心代码:margin:0 auto; /意思为:div的外边距上下为0px,左右居中显示;/ /前提是position为相对定位;不能为absolute绝对定位/ **绝对定位:**是脱离文档流,所以margin无效;它是一...
  • DIV中文水平、垂直居中实现Div层里的文字垂直居中的方法 有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,但真正能实现而代码又简洁...
  • 实现DIV层内的文字垂直居中

    千次阅读 2015-10-20 14:29:14
    有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用的div文字垂直居中...
  • input文本框文字垂直居中

    万次阅读 2012-06-11 10:06:06
    这几天写网页需要设置表单样式,发现表单默认input文本框文字并不垂直居中而在顶端,如何调整呢,可以通过css来调整垂直高度,代码演示如下    height: 设置input样式的高度,line-height:...
  • CSS 图片+文字,文字垂直居中问题

    千次阅读 2013-03-20 14:17:39
    网页布局中,垂直居中是很常用的需求。 例如文字的居中: HTML代码: 手机 CSS代码: .demo{ border: 1px solid #000; height: 64px; line-height: 64px; } 我们可以...
  • 有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用的div文字垂直居中...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 249
精华内容 99
关键字:

网页字垂直居中