多行文字垂直居中

单行实现垂直居中:

直接让height和line-height相等

div{

     height:50px;

    line-height:50px;

   overflow:hidden;(防止超出div宽度,内容换行,就不能有效果了)

}
多行文字,div固定高度实现垂直居中:

  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}
 div#wrap {
  height:400px;
  display:table;
 }
 div#content {
  vertical-align:middle;
  display:table-cell;
  border:1px solid #FF0099;
 
  width:760px;
 }
  </style>
 </head>
 <body>
 <div id="wrap">
  <div id="content"><pre>现在我们要使这段文字垂直居中显示! Webjx.Com 
 div#wrap {
  height:400px;
  display:table;
 }
 div#content {
  vertical-align:middle;
  display:table-cell;
  border:1px solid #FF0099;
 
  width:760px;
 }
</pre></div>
</div>
多行文字,div都不固定的情况:

div{

   padding:10px;

}

直接给div加个边距,不加宽度,让div自适应

posted @   以后。h  阅读(238)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示