精华内容
下载资源
问答
  • 文字垂直居中

    2021-01-31 11:18:34
    文字垂直居中的原理

    文字垂直居中的原理

    在这里插入图片描述

    展开全文
  • 文字居中input文字垂直居中

    千次阅读 2019-04-23 09:21:31
    做移动端都会遇到文字垂直居中的问题,特别是有些手机真的很难调整,然后就是必须要文字居中,那就说说几种文字垂直居中的问题吧。 普通的元素例如div 1.这种居中,利用padding上下值来居中。 2.知道高度用line-...

    做移动端都会遇到文字垂直居中的问题,特别是有些手机真的很难调整,然后就是必须要文字居中,那就说说几种文字垂直居中的问题吧。
    普通的元素例如div
    1.这种居中,利用padding上下值来居中。
    2.知道高度用line-height来,但是这个一般在安卓手机都有点不是很彻底的居中,偏下一点点。
    3.利用弹性盒子display:flex;align-items: center;也能垂直居中;
    如果是利用父子两个元素;上述的方法都行,在此基础上补充几个;
    4.利用绝对定位。父级position: relative;子元素: position: absolute; top: 0;bottom: 0; margin: auto;
    5.同样是绝对定位。父级position: relative;子元素: position: absolute; top: 50%;transform: translate(0, -50%);
    6.如果是利用标签的属性,比如button,input这些都是可以自己垂直居中的;
    7.当然,这些我全部试过,但是在安卓某些手机上依旧是偏上一点,这就很蛋疼了。后来也是自己寻找利用安卓的属性来特定的设置的方法,例如

    isAndroid: function(){
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/android/i) == "android") {
            return true;
        } else {
            return false;
        }
      },
    if(isAndroid()){
        $('.div').addClass('android');
    }
    .div{
        margin-top: 7px;
    }
    .div.android{
        margin-top: 10px;
    }
    

    但是这样写有点繁琐,因为每个页面很多地方都有可能需要。但是这是处理比较好的方式了,
    8.还有就是利用transform先放大在缩小,但是这样一来就会把元素的占位放大一倍;而且仔细看还是有一点不居中,不过好多了。
    9.内行高+line-height:normal;也能垂直居中,

    <div style="box-sizing: border-box; padding: 5px; line-height: normal; font-size: 11px;">
      <span>嘿嘿</span>
    </div>
    

    10.行高+font-size:initial这样也能垂直居中。

    <divstyle="line-height: 26px; font-size: initial;">
      <span style="font-size: 11px;"> 嘿嘿</span>
    </div>
    

    介绍了这些垂直居中的方法,总有一种适合你的

    展开全文
  • 固定行数文字垂直居中与不固定行数文字垂直居中 今天碰到一个固定固定行数文字垂直居中展示的问题,学到一个新的css属性-webkit-line-clamp。 -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property...

    固定行数文字垂直居中与不固定行数文字垂直居中

    今天碰到一个固定固定行数文字垂直居中展示的问题,学到一个新的css属性-webkit-line-clamp。

    -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
    为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:
    display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
    -webkit-box-orient :vertical;必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
    text-overflow,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

    重点是它不支持IE浏览器和火狐浏览器!!!!

    不固定行数文字垂直居中就简单多了。

    父级选择器{display: table;height:100px;}
    子级选择器{display: table-cell; vertical-align:middle; text-align:center;}

    但是不兼容IE6和7.

    展开全文
  • 实现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"

    展开全文
  • CSS可以轻易实现文字的水平居中,但有时我们需要文字垂直居中,除了表格可以实现这种CSS文字垂直居中以外,还有其它几种方法可以做到
  • 1.单行文字垂直居中,图片垂直居中: (1)用简单的一行代码即可实现单行文字垂直居中:设置 line-height 的值 等于高度的值。代码如下: .div { height: 500px; line-height :500px; } (2)图片垂直居中:...
  • div中多行文字垂直居中
  • 这里通过下面一个实例来讲一下单行文字居中和多行文字居中的方法: 一、单行文字居中 原理: 使用height 和 line-height,相等的原理。 二、多行文字居中 原理: 将多行文字当做一张图片去处理...
  • 多行文字垂直居中

    2018-05-26 17:41:25
    单行文字垂直居中 单行文字垂直居中比较简单,只需将 line-height 属性值与其父元素的 height 属性值设为相等即可。如下所示: .text{ line-height: 20px; height: 20px; } 多行文字垂直居中 HTML代码: ...
  • 在html页面设计时,经常需要让容器内部的图片或文字上下垂直居中,通过CSS可以很方便的进行设置。1,图片垂直居中 给图片添加 vertical-align:middle; 样式即可 </div>2,文字垂直居中 要把
  • 单行文字垂直居中

    2020-11-28 12:50:21
    单行文字垂直居中 单行文字垂直居中原理: 行高由 上空隙,下空隙 和 文字本身高度 组成。 简单理解:行高的上空隙和下空隙把文字挤到中间了。如果行高小于盒子高度,文字会偏上;如果行高大于盒子高度,则文字偏下。...
  • 元素、文字垂直居中

    千次阅读 2017-02-25 12:00:43
    让一个元素垂直居中是我们开发经常遇到的问题,下述整理各种情况: 1.div垂直居中(1)绝对定位方式(2)设置外边距(3)利用transform属性 (5)flexbox居中方式 2.文字垂直居中(1)line-height(2)dispaly:table
  • 移动端 文字垂直居中

    2020-04-17 22:37:03
    一般文字垂直居中想到 line-height = height 但是在移动端查看网页就会发现line-height = height 并不能很好的解决文字垂直居中,总是存在偏差 是因为line-height = height 是pc端的垂直居中 移动端还是需要借助...
  • flex方法 <div class="father">...多行文字垂直居中</span> <span>多行文字垂直居中</span> <span>多行文字垂直居中</span> <span>多行文字垂直居中</span>
  • SegmentFault 2014年招聘第一季:后端开发工程师 SegmentFault 2014年招聘第一季:后端开发工程师 SegmentFault 2014年招聘第一季:后端开发工程师article{display:block;}.left{float:left;}.right{width:800px;...
  • 在实际工作的过程中经常遇到图片文字的混排,需要图片与一段文字垂直居中,这个实现方法以前一直非常复杂,而flex是解决这个问题比较好的办法; css代码 display:flex; flex的是Flexible的缩写,意为弹性。可以...
  • TextBlock控件文字垂直居中源码

    热门讨论 2013-04-15 16:47:51
    TextBlock 控件文字垂直居中源码(运行环境vs2010)
  • CSS - 使表格td中的文字垂直居中

    万次阅读 2019-04-21 01:05:10
    文字垂直居中的有如下的方法 方法一:valign:middle //不推荐使用 代码如下: <table> <tbody> <tr> <tdvalign="middle">垂直居中</td> </tr> <...
  • css文字垂直居中

    2019-06-23 15:56:11
    css文字垂直居中 demo <div id="beach"> <div id="xuanfu"> <p>The end of Noosa’s relaxed and chilled main beach</p> </div> </di...
  • 实现文字垂直居中

    2014-06-24 21:52:18
    实现文字垂直居中
  • Word365英文版,文字垂直居中
  • div中让文字垂直居中

    千次阅读 2018-08-12 19:59:27
    在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来。 情景再现 为了方便展示,我把style先直接写在了div里。 &amp;lt;div style=&...
  • 图片文字垂直居中

    千次阅读 2019-02-18 15:11:31
    1.1 图片文字垂直居中 方法1: 通过设置父元素table,子元素table-cell和vertical-align 、vertical-align:middle的意思是把元素放在父元素的中部 &lt;div&gt; &lt;img border="0" src="...
  • 文本框控件可以使文字垂直居中

    热门讨论 2009-10-14 09:50:15
    大多数文本框中文字都垂直靠上,很不美观,该控件使文字垂直居中
  • 一个学习使用的笔记实例,用纯css 实现css 文字自动换行并垂直居中div效果,这样就像表格一样可以实现不管多少内容都可以居中显示了哦。demo.box {position: relative;width: 500px;height: 300px;border: 1px solid ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,163
精华内容 21,265
关键字:

文字垂直居中