zoukankan      html  css  js  c++  java
  • Div垂直居中及容器内图片垂直居中的CSS解决方法

    Div垂直居中及容器内图片垂直居中的CSS解决方法

    http://axl234.iteye.com/blog/781094

        Div与CSS布局,最让人头疼的就是容器内的东西如何垂直居中的问题,我总结出以下居中办法,兼容IE与及Firefox 方法一 <style type="text/css"> <!-- * {margin:0;padding:0} div {   500px;   height:500px;   border:1px solid #666;   overflow:hidden;   position:relative;   display:table-cell;   text-align:center;   vertical-align:middle } div p {   position:static;   +position:absolute;   top:50%   } img {   position:static;   +position:relative;   top:-50%;left:-50%;   } --> </style> <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>

    方法二 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div里面图片垂直居中的几个例子</title> <style type="text/css"> <!-- body {   margin:0;padding:0 } div {   500px;   height:500px;   line-height:500px;   border:1px solid #666;   overflow:hidden;   position:relative;   text-align:center; } div p {   position:static;   +position:absolute;   top:50% } img {   position:static;   +position:relative;   top:-50%;left:-50%;   vertical-align:middle } p:after {   content:".";font-size:1px;   visibility:hidden } --> </style> </head> <body> <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div> </body> </html>
    方法三
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div里面图片垂直居中的几个例子</title> <style type="text/css"> <!-- * {margin:0;padding:0} div {   500px;   height:500px;   line-height:500px;   border:1px solid #666;   overflow:hidden;   position:relative;   text-align:center; } div p {   position:static;   +position:absolute;   top:50%;   vertical-align:middle } img {   position:static;   +position:relative;   top:-50%;left:-50%;   vertical-align:middle } --> </style> </head> <body> <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div> </body> </html>
  • 相关阅读:
    encodeURIComponent编码时为什么要编码两次
    JS校验身份证号的合法性
    react-router与react-router-dom使用时的区别
    数组去重
    window的cmd命令行下新增/删除文件夹及文件
    数组排序【冒泡排序、快速排序、选择排序】
    个人搭建后台管理模板 Bootstrap4 ,ASP.NET Core,EF Core,JWT
    个人搭建后台管理模板 Bootstrap4 ,ASP.NET Core,EF Core,JWT
    react-starter-projects
    基于H.ui.Admin UI模板的网站管理后台
  • 原文地址:https://www.cnblogs.com/tabcdt/p/2738047.html
Copyright © 2011-2022 走看看