精华内容
下载资源
问答
  • 网页图片垂直居中

    2014-08-16 11:35:27
    网页中的图片垂直居中的代码。例子教你怎么快速的方便的写垂直居中
  • 实现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设置图片和文字垂直居中的方法:文本的垂直居中:单行文本只要height值等于line-height值就#father{width:300px;height:200px;background-color:skyblue;line-height:200px;}#son{backg...

    CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

    3467486f76dd283bc512e3e1bf795dc5.png

    css设置图片和文字垂直居中的方法:

    文本的垂直居中:

    单行文本

    只要height值等于line-height值就

    #father{

    width:300px;

    height:200px;

    background-color:skyblue;

    line-height:200px;

    }

    #son{

    background-color:green;

    }

    我是文本

    效果如下:

    534fe540db8f75670f2539eeeb7dcc73.png

    height === line-height 无法使替换元素,如、、、…垂直居中,必须有、…类似行内标签配合才能使垂直居中生效!

    多行文本

    1:高度固定

    关键属性:display:tabel-cell; vertical-align:middle;

    div{

    height:200px;

    width:300px;

    vertical-align:middle;

    display:table-cell;

    word-break:break-all;

    background:skyblue;

    }

    红豆生南国,春来发几支。愿君多采撷,此物最相思。

    效果如下:

    c5a74bc83fb62d237100bf15f9ba77d6.png

    2:父级高度固定,嵌套行内元素

    关键属性:父级:diaplay:tabel; 子集:display:tabel-cell; vertical-align:middle;

    div{

    height:200px;

    width:300px;

    display:table;

    word-break:break-all;

    background:skyblue;

    }

    span{

    display:table-cell;

    vertical-align:middle;

    }

    红豆生南国,春来发几支。愿君多采撷,此物最相思。

    效果如下:

    c7fe31dd074bb6cd14b261f549d467b2.png

    3:父级高度固定,嵌套块级元素且该元素高确定

    关键属性:定位 + margin-top:负值;

    *{

    margin:0;

    padding:0;

    }

    div{

    height:200px;

    width:300px;

    position:relative;

    word-break:break-all;

    background:skyblue;

    }

    p{

    position:absolute;

    top:50%;

    left:0;

    height:80px;

    margin-top:-40px;

    background:red;

    }

    红豆生南国,春来发几支。愿君多采撷,此物最相思。

    效果如下:

    52dc5c99261467aca86236177b68eda3.png

    二、图片垂直居中水平居中:

    1、img父级display:table-cell; vertical:middle; height:xxx; (推荐)

    div{

    display: table-cell;

    width:300px;

    height:200px;

    vertical-align: middle;

    /*text-align:去掉则垂直不水平*/

    text-align:center;

    background:skyblue; /*table-cell 可以使替换元素垂直居中,强大!*/

    }

    img{

    width:100px;

    height:100px;

    }

    1.jpg

    效果如下:

    a3b06fddf0707ed426a13caa4b29d226.png

    2、定位 + margin:auto;

    div{

    position:relative;

    width:400px;

    height:300px;

    text-align:center;

    background:#999;

    }

    img{

    position:absolute;

    top:0;bottom:0;

    left:0;right:0;

    margin:auto;

    }

    1.jpg

    展开全文
  • div相对于父元素水平垂直居中(相对网页水平垂直居中在下面) 弹性布局 父元素作为容器设置宽高、弹性布局、水平轴和交叉轴居中 display:flex; justify-content:center; align-items:center; 使用CSS3 transform ...

    div相对于父元素水平垂直居中(相对网页水平垂直居中在下面)

    1. 弹性布局

      父元素作为容器设置宽高、弹性布局、水平轴和交叉轴居中

      display:flex;
      justify-content:center;
      align-items:center;
      
    2. 使用CSS3 transform 和 绝对定位

      父元素有宽高设置相对定位

      position:relative;
      

      子元素设置

      position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      
    3. 使用绝对定位

      父元素有宽高设置相对定位

      position:relative;
      

      子元素设置

      position:absolute;top:50%;left:50%;margin-top:-50%子元素宽;margin-left:-50%子元素高;
      
    4. 使用 text-align:center; vertical-align:middle;

      父元素有宽高设置 \

      display:table-cell;  text-align:center;  vertical-align:middle;
      

      子元素设置

      display:inline-block
      
    5. 绝对定位居中(margin:0 auto)

      父元素设置相对定位

      position:relative;
      

      子元素设置绝对定位

      margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;
      

    div相对于网页水平垂直居中

    1. 使用CSS3 transform 和 绝对定位

      子元素设置

      position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      
    2. 绝对定位居中(margin:0 auto)

      子元素设置绝对定位

      margin:auto;position:absolute;top:0;left:0;bottom:0;right:0; 
      
    展开全文
  • 下面代码一致:示例 自己做的网站效果示例 div相对于页面水平居中显示: 核心代码:margin:0 auto;...任何元素可以穿过它 **相对定位:**是偏移某个距离,且保持未定位签的形状,它原本所占的空...

    下面代码一致:示例下面代码一致:示例一
    自己做的网站效果示例自己做的网站效果示例
    div相对于页面水平居中显示:
    核心代码:margin:0 auto;
    /意思为:div的外边距上下为0px,左右居中显示;/
    /前提是position为相对定位;不能为absolute绝对定位/
    **绝对定位:**是脱离文档流,所以margin无效;它是一个虚体;任何元素都可以穿过它
    **相对定位:**是偏移某个距离,且保持未定位签的形状,它原本所占的空间仍保留。margin有效;它是一个实体;

    文字水平居中显示(相对于简单文本居中):
    核心代码:text-align: center;
    用法:
    1、div中直接写css代码:text-align: center;
    2、在div子级文本标签中写:text-align: center;
    解释:
    /意思为:文本对齐方式为:中心;
    前提是一个div包着,参照物为div
    /

    文字垂直居中显示:
    核心代码:line-height:30px;
    用法:
    div:height:30px;
    div中的文字:line-height: 30px;
    解释:
    /意思为:离线高度为30px;/
    /前提有两个:
    1 页面本身有margin(外边距)和padding(内边距):所以,都要设置为0px;
    2 与自己的父级(或div)高度要设置一致;
    /

    文字水平居中显示(相对于导航栏浮动的多个文本居中):
    适用:导航栏中浮动后文本为多个而且之间都有间距的方法;
    用法:
    div:width: 150px;
    div 中的文字:
    padding-left:22.5px;
    margin-left: 22.5px;
    font-size: 30px;
    解释:
    div父级设置宽度;
    div中的子级设置它的内边距和外边距为父级宽度的四分之一;
    前提字体设置宽度,父级宽度减去每个字体大小,再除以四分之一

    图片和文本垂直居中
    设置css使文字和图片同排同行时候上下垂直居中
    img{ vertical-align:middle;}

    思维拓展:
    text-align: center;
    属性规定元素中的文本的水平对齐方式。
    设置块级元素内文本的水平对齐方式
    调整行内容中字母和字之间的间隔
    text-align :justify
    实现两端对齐文本效果。
    align-items: center; /垂直居中/
    justify-content: center; /水平居中/

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>cssdiv、文字、图片居中</title>
    		<style type="text/css">
    			*{
    				margin:0px;
    				padding:0px;
    			}
    			.div_one{
    			 position: relative;
    		     border:1px solid red;
    		     width:1000px;
    		     height:100px;
    		     margin:0 auto;	
    		     /*意思为:div的外边距上下为0px,左右居中显示;*/
    		    /*前提是position为相对定位;不能为absolute绝对定位*/
    		    
    		    /*text-align: center;*/
    		}
    		.div_one p{
    			font-size: 20px;
    			
    			text-align: center;
    			/*意思为:文本对齐方式为:中心;
    			前提是一个div包着,参照物为div*/
    			
    			line-height: 100px;
    			/*意思为:离线高度为100px;*/
    			/*前提有两个:
    			1 页面本身有margin(外边距)和padding(内边距):所以,都要设置为0px;
    			2 与自己的父级(或div)高度要设置一致;*/
    			
    			
    		}
    		
    		.div_two{
    			top: 100px;
    			position: relative;
    		     border:1px solid green;
    		     width:1000px;
    		     height:300px;
    		     margin:0 auto;
    		     
    		     text-align: center;
    		}
    		.div_two img{
    			width:300px;
    			height: 200px;
    			
    			/*align-content: center;
    			align-items: center;*/
    			/*justify-content: center;*/
    			transform:translateY(25%);
    			
    			/*vertical-align:200%;*/
    			/*line-height: 300px;*/
    			/*margin-left: 175px;
    			padding-left: 175px;*/
    			
    		} 
    		</style>
    	</head>
    	<body>
    		<div class = "div_one">
    		    <p>div居中和字体居中和字体垂直居中</p>	
    		</div>
    		<div class = "div_two">
    		    	<img src="img/潮流动图4.jpg"/>
    		</div>
    	</body>
    </html>
    
    
    展开全文
  • 移动端 文字垂直居中

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

    千次阅读 2017-03-29 21:49:52
    前端排版的时候,常常会碰到图片在一个区域在正中间,水平居中很容易做到,外层样式用{text-align:center}就可以水平居中;...做网页的工具行 ,比如:Dreamweaver,Aptana Studio,EditPlus等,记事本也
  • 在曾经的 淘宝UED 招聘 中有这样一道题目:“使用纯CSS实现未知尺寸的图片(但高宽小于200px)在200px的正方形容器中水平和垂直居中。”当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的...
  • 一个学习使用的笔记实例,用纯css 实现css 文字自动换行并垂直居中div效果,这样就像表格一样可以实现不管多少内容可以居中显示了哦。demo.box {position: relative;width: 500px;height: 300px;border: 1px solid ...
  • css不提供单行文字垂直居中功能 但是可以用小技巧使它垂直居中。 让高度和文字行号相同。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
  • 一,字体的设置二,垂直居中2.1,单行文本垂直居中2.2,多行文本垂直居中2.3,绝对定位元素垂直居中三、颜色的表示法四、background---------------------------------------------------------一,字体的设置font-...
  • css文字水平垂直居中怎么设置?下面本篇文章就来给大家介绍使用CSS设置文字水平居中垂直居中的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。1、文字水平居中在CSS中想要让文字水平居中...
  • 网页css自适应高度下垂直居中文字

    千次阅读 2018-08-01 19:34:42
    网页css自适应高度下垂直居中文字 1、关于css自适应高度下垂直居中文字,非定位类的方法实现 : 分析:使用vertical-align方法可以使元素垂直居中,但是只是针对支持vertical的元素,如table 、td 等,div和span...
  • 最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,比较简单。 水平居中直接加上&amp;lt;center&amp;gt;标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中...
  • 任何元素可以穿过它 **相对定位:**是偏移某个距离,且保持未定位签的形状,它原本所占的空间仍保留。margin有效;它是一个实体; 文字水平居中显示(相对于简单文本居中): 核心代码:text-align: center; 用法:...
  • 有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用的div文字垂直居中...
  • 我们知道,在IE9有时会遇见自己写的网页文字不能垂直居中,究竟IE9 line-height设置文字不能垂直居中原因是什么?相信大家在IE9看见自己使用line-height设置垂直居中文字不能垂直居中,这是与你设置css字体有关,...
  • 偶尔网页中会出现竖排文字的排版需求,经常伴随着重直居中、水平居中的要求。这两天试了好多办法,最后打到一个两个元素嵌套来实现的方法,似乎有点复杂,但没有想到简单的办法。先看一下效果(仅在chrome浏览器中...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,509
精华内容 19,803
关键字:

网页字垂直居中