固定高度div下多行文本内容的垂直居中

最新推荐文章于 2023-05-25 14:38:05 发布
最新推荐文章于 2023-05-25 14:38:05 发布
阅读量3.5k 收藏
点赞数
分类专栏： html 文章标签： div border ie xhtml table html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
 <head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}
 div#wrap {
  display:table;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:400px;
  *position:relative;//hack IE6和IE7
  overflow:hidden;
 }
 div#subwrap {
  vertical-align:middle;
  display:table-cell;
  *position:absolute;//hack IE6和IE7
  *top:50%;//hack IE6和IE7
 }
 div#content {
  *position:relative;//hack IE6和IE7
  *top:-50%;//hack IE6和IE7
 }
  </style>
 </head>
 <body>
 <div id="wrap">
  <div id="subwrap">
   <div id="content"><pre>现在我们要使这段文字垂直居中显示！
 div#wrap {
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:500px;
  position:relative;
 }
 div#subwrap {
  position:absolute;
  border:1px solid #000;
  top:50%;
 }
 div#content {
  border:1px solid #000;
  position:relative;
  top:-50%;
 }</pre>
  </div>
 </div>
</div>
 </body>
</html>
m_yeah
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
09-22
接下来将介绍下：div垂直居中的N种方法包括:单行垂直居中/多行未知高度文字的垂直居中/多行文本固定高度的居中/在InternetExplorer中的解决方案等等感兴趣的你可不要错过了哈，或许本文所提供的方法对你有所帮助
关于多行文字水平垂直居中的一点心得分享
09-25
创建一个包含多行文本的容器（`.wrapper`），并为其设置固定宽度和高度，背景色以便观察效果。然后，为`.wrapper`添加`:before`伪元素，内容为空点（`.`），使其作为内联块元素，并设置`vertical-align: middle`，...
5种div 内容水平垂直居中方法
等花开一起压花路
05-25 1万+
以上五种方法都能实现 div 中内容的水平垂直居中，具体使用哪种方法可以根据具体的项目需求和适用场景来决定。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。
文本垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
lml_little的博客
02-17 1万+
css中垂直居中样式vertical-align:middle属性,但是此属性只对标签、、，和内联元素display设置为inline/inline-block起作用，其他的则不起作用。 1.单行文本垂直居中： 如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如： div{ height:25p
CSS设置多行文本垂直居中的方法
12-13
本文将详细探讨如何使用CSS实现多行文本垂直居中，并解决在特定情况下遇到的问题。 首先，对于单行文本的垂直居中，可以简单地通过设置`line-height`与`height`相等来实现。例如： ```css .single-line-center { ...
div中多行文字垂直居中
07-21
当`div`的高度固定且仅包含一行或多行文本时，可以将`div`的`line-height`设置为其`height`值，以实现垂直居中。 ```css .parent { height: 100px; /* 需要根据实际情况设定 */ line-height: 100px; } ``` ...
CSS多行文本固定高度的居中
u800820的专栏
06-14 867
CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display 属性能够模拟，所以我们可以使用这个属性来让模拟就可以使用vertical-align了。注意，display:table和 display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一
一个高度不固定的div，里面的文字如何垂直居中？
在希
04-02 4314
一个高度不固定的div，里面的文字如何垂直居中？ 最近在做项目中遇到父元素高度不固定，但是Dom元素里面的文本内容需要上下居中显示,解决方案： 一、针对弹性布局的盒子： 垂直居中： align-items:center; display: -webkit-flex; 水平居中： justify-content:center; display: -webkit-flex; 二、可通过js动态设置...
多行文本垂直居中的三种方法
carpenterworm1874的博客
03-23 2万+
本篇是我整理的多行文本垂直居中的三种方法效果图如下图方法一：父元素使用display:table和子元素使用display:table-cell属性来模拟表格，子元素设置vertical-align:middle即可垂直居中&lt;div class="span_box bg_box"&gt; &lt;span class="words_span"&gt; 方法一：父元素使用display:...
固定宽高的div垂直居中
dou_xiaobao的博客
08-04 296
css中固定宽高div垂直居中的实现方式 假设外层div宽高均为600px；内层宽高均为200px； 代码如下: <style> .box { width: 600px; height: 600px; background-color:#f00; position: relative; } .box > div { width: 200px; height: 200px; background-color: #ff0; position:
源码分析MediaStore是如何管理文件的(二)
热门推荐
weixin_43330321的博客
07-20 37万+
我们来重点分析MediaProvider,首先MediaProvider继承自ContentProvider,一定实现了query方法,我们找到这个query方法,方法很长,我们一部分一部分来看: uri = safeUncanonicalize(uri); 首先这个safeUncanonicalize方法就不懂,跟踪它, 1267 private Uri safeUncanonical...
android中转换content://media/external/images/media/539163为/storage/emulated/0/DCIM/Camera/IMG_20160807_
阿亮
09-20 11万+
在上传照片时遇到上传路径异常：content://media/external/images/media/539163 转成：/storage/emulated/0/DCIM/Camera/IMG_20160807_133403.jpg路径；PHOTO_DATA（content://media/external/images/media/539163）Log.d(“log”,”照片路径信息：”+S
多行文字在div实现垂直居中的方法
一只程序媛
01-16 1650
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多行文字在div实现垂直居中的方法</title> <style> .middle-box{display: table; height: 300px;width:300px;border:1px solid #00000
duilib 多行垂直居中问题.
10-08 4848
duilib 显示文字　调用的是::DrawText（）　,换行需要设置属性.wordbreak. else if( _tcsicmp(pstrName, _T("wordbreak")) == 0 ) { if( _tcsicmp(pstrValue, _T("true")) == 0 ) { m_uTextStyle &= ~DT_SINGLELINE; m_uText
div中的文本如何居中
最新发布
06-10
2. 对于多行文本，可以设置 div 的 display 属性为 table，然后设置其内部元素（如 p、span 等）的 display 属性为 table-cell，再设置其 vertical-align 属性为 middle，这样文本就会水平垂直居中。 ```css div { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值