- 1、本文档共21页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
css教程div垂直居中的n种方法(CSS tutorial div vertical central n method)
css教程div垂直居中的n种方法(CSS tutorial div vertical central n method)
When it comes to this question, one might ask, isnt there a vertical-align property in CSS that sets the center vertically? Even if some browsers dont support me, I just have to do a little CSS
Hack technology is fine! So here I also winded two, CSS is indeed a vertical-align attribute, but it is only for valign (X) has the characteristics of HTML elements was born
Effects such as td, th, caption, etc. in table elements, and elements such as div and span do not have valign characteristics, so using vertical-align can not afford them
Effect。
Related tutorials: div level centered N method
One, vertical, middle
If there is only one line of text in a container, it is relatively simple to implement it. We only need to set its actual height height and the height of the line line-height equal.
Such as:
{div
Height:25px;
Line-height:25px;
Overflow:hidden;
}
This code is simple, and later, the overflow:hidden setting is used to prevent the contents from exceeding the container or generating a newline, so that the vertical centering effect is not achieved. More CSS teach
Cheng.
DOCTYPE, HTML, PUBLIC, -//W3C//DTD, XHTML, 1, Transitional//EN, /TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns= /1999/xhtml
head
title single line text, vertically centered, /title
meta http-equiv= Content-Type content= text/html; charset=utf-8 /
style type= text/css
Body {font-size:12px; font-family:tahoma;}
{div
Height:25px;
Line-height:25px;
Border:1px solid #FF0099;
Background-color:#FFCCFF;
}
/style
/head
body
div now, we want to make this text centered vertically! /div
/body
/html
Two, many lines, unknown height text vertical center
If a section of content is highly variable, then we can use the last method used in the middle of the implementation level, that is, to set Padding up and down
Padding same value. Also, this is a look vertically, it is just a way to make the text div completely filled. Can be used similarly
Face cod
您可能关注的文档
- (转)什么是西南大旱的最坏准备_月是故乡明_新浪博客((trans) what's the worst preparation for a drought in Southwest China _ is home next month _ Sina blog).doc
- (人教版)八年级下册语文课后生字词拼音及解释(完整版)((PEP) grade eight Chinese Pinyin words epigenetic and interpretation (full version)).doc
- 0-90度正弦值(0-90 degree sine).doc
- - 上海lng加气站 上海cng加气站博客上海lng加气站 上海cng加气站博客(- Shanghai LNG filling station, Shanghai CNG filling station blog, Shanghai LNG filling station, Shanghai CNG filling station blog).doc
- 010年顺义区中考二模数学试题(010 years of Shunyi District senior high school entrance examination mathematics examination the second mock exam).doc
- (设计)工作细则 - 上海工程技术大学 继续教育学院((Design) working rules - Continuing Education College of Shanghai University of Engineering Science).doc
- 02-03第一学期初三语文试卷52898(02-03 Chinese exam paper for the first semester 52898).doc
- 020我国基层群众自治制度地位的重大提升(020, the important promotion of our country's grass-roots mass autonomy system).doc
- 05-2-1.汉王降价,能降出个怎样的未来(05-2-1. Hanvon prices can drop out of what the future).doc
- 05.无形资产(5 intangible assets).doc
文档评论(0)