精华内容
下载资源
问答
  • html单行文本垂直居中

    千次阅读 2020-03-13 19:53:46
    单行文本垂直居中,在于使用line-height 若是line-height = height 可以实现垂直居中 若是line-height < height 文字偏上 若是line-height > height 文本篇下 实验案例: <!DOCTYPE html> <...

    单行文本垂直居中,在于使用line-height

    若是line-height = height  可以实现垂直居中

    若是line-height < height   文字偏上

    若是line-height > height   文本篇下

    实验案例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>导航栏-行内块元素</title>
            <style>
            .a1{
                display: inline-block;
                width: 200px;
                height: 40px;
                background-color: #C0C0C0;
                text-align: center;
                text-decoration: none; 
                line-height: 40px;    
            }
            
            .a2{
                display: inline-block;
                width: 200px;
                height: 40px;
                background-color: #C0C0C0;
                text-align: center;
                text-decoration: none; 
                line-height: 50px;    
            }
            
            .a3{
                display: inline-block;
                width: 200px;
                height: 40px;
                background-color: #C0C0C0;
                text-align: center;
                text-decoration: none; 
                line-height: 30px;    
            }
        </style>
        </head>
        <body>
            <a href="#" class="a1">文本居中</a>
            <br /><br />
            <a href="#" class="a2">文本偏下</a>
            <br /><br />
            <a href="#" class="a3">文本偏上</a>
        </body>
    </html>

    效果图:

     

     

    展开全文
  • HTML 中多行文本垂直居中

    万次阅读 2018-03-01 10:13:11
    最近在做官网,其中有个小小的需求是一段多行文本在一个区域内垂直居中,就如下图... http://blog.csdn.net/u014607184/article/details/51820508 这篇博文中讲道德是 垂直居中的问题,它分为单行文本垂直居中和多...

        最近在做官网,其中有个小小的需求是一段多行文本在一个区域内垂直居中,就如下图所示:



        需要将右面的文字垂直居中,通过网上查找资料显示可以使用display:table 的方法来实现。

        请看这篇博文; http://blog.csdn.net/u014607184/article/details/51820508

        这篇博文中讲道德是 垂直居中的问题,它分为单行文本垂直居中和多行文本垂直居中。

        1.其中单行文本 好实现 通过 line-height 样式就可以解决

        2.多行文本垂直居中 又分为 两种情况,一种是父元素高高度不固定,另外一种是父元素高度固定。

            2.1父元素高度不固定的使用padding 样式就可以解决,详情可以查看 上面那篇博文:

            http://blog.csdn.net/u014607184/article/details/51820508

            2.2父元素高度固定时 也就是 现在的这个需求,我是这样解决的 

            其中html部分


            

    <div class="video_text">
    				<div class="text_middle">
    					心聆教育团队始建于2003年,是一家专注于青少年心理健康、学习能力提升、素质化家庭教育、中小学教育教学改革、
    				教师培训及跨学科素养课程研发等方面的专业咨询服务企业。经过多年的理论准备和实践探索,于2015年成立了以
    				文化创意为引领,以认知心理技术,人工智能和教育新文化为手段的教育科技企业——北京心聆教育科技有限公司。
    				</div>
    			</div>

            html部分可以看到 有两个div  css部分如下:

            

    .video_text{
    				width: 40%;
    				height: 400px;
    				color: #666666;
    				font-family: "微软雅黑";
    				font-weight: bold;
    				text-align: left;
    				text-indent: 2em;
    				line-height: 24px;
    				float: right;
    				border: 1px solid blue;
    				display: table;
    			}
    			.text_middle{
    				display: table-cell;
    				vertical-align: middle;
    			}

            其中最关键的是最外层div 设置样式:display:table

            内层div设置样式: display:table-cell;   vertical-align: middle.

            如果没有 前面两句: display: table 和 display: table-cell  后面的那句 vertical-align: middle 也不会生效。

            通过这个例子,以后碰到 多行文本 垂直居中的时候就知道该怎么办了。

            方法来源于 其他人 也就是这篇博文:

            http://blog.csdn.net/u014607184/article/details/51820508

            在这里感谢这篇博文的主人。 

            不积小流,无以成江海;

            不积跬步,无以至千里。

    展开全文
  • html css实现文本水平垂直居中显示

    万次阅读 多人点赞 2018-10-18 11:20:43
    这几天在工作中遇到了一个小问题:文本内容怎么能在div里水平垂直居中显示呢?同时群里的小伙伴恰巧也有提问这个问题的,所以我就总结了一下我知道的方法。 一、利用行高(line-height)和vertical-align配合实现 ...

    这几天在工作中遇到了一个小问题:文本内容怎么能在div里水平垂直居中显示呢?同时群里的小伙伴恰巧也有提问这个问题的,所以我就总结了一下我知道的方法。

    一、利用行高(line-height)和vertical-align配合实现

    具体做法如下:

    html:

    <div class="box">
        <span>测试文字</span>
    </div>

    css:

    .box{
        width: 200px;
        height: 200px;
        overflow: hidden;
        background: #ccc;
        text-align: center;
    }
    .box span{
        vertical-align: middle;
        line-height: 200px;
    }

    这个地方要注意的是:在.box加line-height与span加line-height的结果是有些许差别的。

    结果:

    但是这样写存在一个算是挺致命的缺点,当文本存在折行的情况怎么办?例如:

    html:

    <div class="box">
        <span>测试文字测试文字测试文字测试文字</span>
    </div>

    css:

    .box{
        width: 200px;
        height: 200px;
        background: #ccc;
        text-align: center;
    }
    .box span{
        vertical-align: middle;
        line-height: 200px;
    }

    结果:

    很明显,这样的结果不是我们想要的,所以这个方法不是很完美的做法。

    二、利用display:table-cell实现水平垂直居中显示

    这种方法我是从网上搜来的,具体做法如下:

    html:

    <div class="cell">
        <span>测试文字测试文字测试文字测试文字</span>
    </div>

    css:

    .cell{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 240px;
        height: 180px;
        border: 1px solid #666;
        background: #ccc;
    }

    结果:

    这种做法无疑是可以解决水平垂直居中显示的问题,而且就算折行也没有关系,但是它不支持margin属性了,其他不支持什么属性我没试过,但是我想会跟table内td不支持的属性大差不差。个人感觉比第一种方法要好一些。

    三、利用定位方式(position)+css的transform实现水平垂直居中显示

    这种方法是我经常使用的一种方法,但是如果需要兼容较低版本的浏览器的话不太实用。具体方法如下:

    html:

    <div class="box">
        <span>测试文字测试文字测试文字测试文字</span>
    </div>

    css:

    .box{
        width: 200px;
        height: 200px;
        background: #ccc;
        text-align: center;
        position: relative;
    }
    .box span{
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    结果:

    这种方式采用了绝对定位,把文本内容定位到外层div(.box)的正中位置,他们的中心点是重叠的,从而实现水平垂直居中显示。这个方法不仅仅实用与文本内容,也适用于div、img等其他html元素。

     

    以上的三种方法就是我比较常用的几种文本水平垂直居中显示的方式,可能还有其他方法我没有用到,欢迎大家给予指正和补充。当然实现居中之后的样式我这里设置的比较简单,大家可以自由发挥使其更加漂亮。

    第一次写技术博客,不足的地方还希望不吝赐教。

    展开全文
  • 前言在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了,比如下面的例子: 复制代码代码如下:<!DOCTYPE html> <...
  • css多行文本垂直居中

    2013-09-27 14:46:09
    css 多行文本垂直居中显示,兼容各大浏览器!
  • css 文本垂直居中

    万次阅读 2019-08-21 10:01:50
    vertical-align: middle;搭配display: table-cell;使用,给父元素添加,然后相关子元素就垂直居中了 效果:

    给父元素添加:vertical-align: middle;搭配display: table-cell;使用,然后相关子元素就垂直居中了:
    在这里插入图片描述在这里插入图片描述

    效果:

    在这里插入图片描述


    或者:
    给需要垂直居中元素的父元素加:

        display: flex;
        align-items: center;
    

    在这里插入图片描述

    展开全文
  • 实现的布局效果是一张图+一段描述性文本,都居中显示,文本垂直居中 最终代码 <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8" /> <title></title&...
  • css div垂直居中对齐In the HTML and CSS world, it's all about the layout structure and the distribution of elements. We usually use HTML to define the markup and structure, while CSS helps us handle ...
  • HTML中实现多文本垂直居中的方法 方法一:父元素使用display:table和子元素使用display:table-cell属性来模拟表格 子元素设置vertical-align:middle即可垂直居中 <div class="box table"> <span class=...
  • html中文本垂直居中的几种方法的介绍
  • html垂直居中的方法

    千次阅读 2020-10-15 16:57:26
    单行文本或几个字的垂直居中 </div> <style> #div1{ width: 300px;height: 100px;/* 设置容器的宽高 */ margin: 100px auto;/* 使容器水平边距自动相等 */ border: 1px solid red;/* 给文本...
  • 在样式布局中,我们经常碰到需要将元素居中。...要实现元素的垂直居中,有人会想到css中的vertical-align属性,但是它只对拥有valign特性的元素才生效,例如表格元素中的&lt;td&gt;、&lt;t...
  • CSS 使用 font-family 属性定义文本的字体系列。 如: p { font-family:"微软雅黑";} div {font-family: Arial,"Microsoft Yahei", "微软雅黑";} 各种字体之间必须使用英文状态下的逗号隔开 一般情况下,如果有...
  • HTML居中对齐与垂直居中

    万次阅读 2019-01-06 13:42:22
    一、设置子div水平对齐 首先要有个父容器设置为text-...二、设置元素垂直居中 1.本人比较推荐使用弹性盒子,主要是现在一般浏览器都支持,可以自动调节 将父容器加上display:flex; flex-direction:column; j...
  • 简单总结一下html中元素的 水平居中、垂直居中、绝对居中的实现方式,感兴趣的朋友可以了解下哦
  • DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> 知不知道box-center宽高都可以 /* .box { width: 200px;...
  • html实现垂直居中的6种方式

    千次阅读 2017-09-03 15:22:20
    利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的...试用:单行文本垂直居中,demo 代码:
  • html文字垂直居中

    千次阅读 2015-12-14 22:38:05
    思路: 如果知道文字区域的高度,那么将line-height等于文字高度即可
  • 一、单行文本居中方式 ...垂直水平居中文本</div> </div>   css样式 #container { width: 600px; height: 300px; border: 1px solid black; } #text{ text-align: center; line-height: 3
  • 移动端文本垂直居中

    千次阅读 2018-02-27 09:19:03
    文本垂直居中display: flex; align-items: center;//垂直居中 justify-content: center;//文本居中 justify-content: flex-start;//文本居左 justify-content: flex-end;//文本居右元素垂直居中,demo<!DOCTYPE html...
  • html 文字上下垂直居中

    万次阅读 2019-06-05 17:13:08
    当把 line-height 的高度设置和 height 高度一样就能使 文字垂直居中 一段简单的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <.....
  • div居中之css水平居中 单行多行文本垂直居中
  • html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
  • 原文链接 CSS中有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,...1.单行文本垂直居中 设置文本高度height和所在行的高度line-height相等。 使用overflow:hidden防止内容超出容器或产
  • 上面的方法只适用于单行文本,多行文本使用就会出现问题,那么如何实现多行文本垂直居中呢? 多行文本垂直居中 1、模拟表格 将父元素div 模拟成表格table,子元素span模拟成表格单元格;让子元素设置vertical-...
  • 上面的方法只适用于单行文本,多行文本使用就会出现问题,那么如何实现多行文本垂直居中呢? 多行文本垂直居中 1、模拟表格 将父元素div 模拟成表格table,子元素span模拟成表格单元格;让子元素设置vertical-align:...
  • 单行文本垂直居中

    2020-06-08 18:40:39
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height: 50px; background-color: ...
  • 一、水平居中 方法一:在父容器上定义固定宽度,margin值设成auto 效果如图所示 方法二:在子元素中将display设置为inline-block,父元素text-algin设置为center 效果如图所示 方法三、使用定位属性 首先设置父元素...
  • 文本垂直居中 方法: 盒内元素的行高等于盒子的高度即可完成文本的垂直居中。 结果如下图: 将如下代码复制保存为.html格式的文件,并用浏览器查看结果。 注意第23与26行设置两者高度相同。 <!doctype html> &...
  • css 文本和div垂直居中方法汇总

    万次阅读 多人点赞 2016-07-04 14:10:07
    本文总结了垂直居中的各种方法,包括单行文本垂直居中、多行文本垂直居中以及div垂直居中,列出了多种情况对应的方法。读者可以根据实际需要选择合适的方法。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,917
精华内容 14,366
关键字:

html文本垂直居中