垂直居中及容器內圖片垂直居中的CSS解決方法

方法一:

<style type="text/css">
<!--
* {margin:0;padding:0}
div {
? width: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 {
? width: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 {
? width: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>

方法四（針對背景圖片居中）:

<!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 {
? width:500px;border:1px solid #666;
? height:500px;
? background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat
}
-->
</style>
</head>
<body>
<div></div>
</body>
</html>


?

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/280887.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/280887.shtml
英文地址，請注明出處：http://en.pswp.cn/news/280887.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Django04: ORM配置與使用MySQL數據庫

Django04: ORM配置與使用MySQL數據庫

配置&#xff1a; 1.手動創建數據庫。 create database testDB 2. 在Django項目的settings.py文件中&#xff0c;配置數據庫連接信息&#xff1a; DATABASES {"default": {"ENGINE": "django.db.backends.mysql","NAME": "你…
閱讀更多...
推薦一款 .NET 編寫的 嵌入式平臺的開源仿真器

推薦一款 .NET 編寫的 嵌入式平臺的開源仿真器

Renode 是一個開發框架&#xff0c;通過讓你模擬物理硬件系統來加速物聯網和嵌入式系統開發。Renode 可以模擬 Cortex-M、RISC-V 等微控制器&#xff0c;不僅可以模擬 CPU指令&#xff0c;還可以模擬外設&#xff0c;甚至可以模擬板載的外設。更強的是&#xff0c;它可以讓你在…
閱讀更多...
Android Bluetooth模塊學習筆記

Android Bluetooth模塊學習筆記

一、藍牙基礎知識 1.藍牙&#xff08; Bluetooth &#xff09;是一種無線技術標準&#xff0c;可實現固定設備、移動設備和樓宇個人域網之間的短距離數據交換。藍牙基于設備低成本的收發器芯片&#xff0c;傳輸距離近、低功耗。 2.微波頻段&#xff1a;使用2.402GGHz到2.480GHz…
閱讀更多...
sql刪除無人借閱的書_查找，下載，借閱，租賃和購買電子書的最佳網站

sql刪除無人借閱的書_查找，下載，借閱，租賃和購買電子書的最佳網站

sql刪除無人借閱的書So, you’ve got yourself an eBook reader, smartphone, tablet, or other portable device and you want to put some eBooks on it to take with you. There are many options for obtaining free eBooks as well as purchasing, borrowing, or even ren…
閱讀更多...
django05:ORM示例--person 增刪改查

django05:ORM示例--person 增刪改查

建立數據庫連接后&#xff0c;演示代碼 見我的資源 https://download.csdn.net/my
閱讀更多...
C#如何用正則表達式截取https和帶端口的域名

C#如何用正則表達式截取https和帶端口的域名

如題。現有代碼如下。只能截取 http://www.baidu.com的 www.baidu.com當域名為https://www.baidu.com 或者為 http://www.baidu.com:8080 時 則無法正確讀取。。求高手給去能截取這樣格式的代碼 Thanks!string p "http://[^\.]*\.(?<domain>[^\.]*)";Regex r…
閱讀更多...
推薦一個開源的 .NET 二維碼生成庫

推薦一個開源的 .NET 二維碼生成庫

你好&#xff0c;這里是 Dotnet 工具箱&#xff0c;定期分享 Dotnet 有趣&#xff0c;實用的工具和組件&#xff0c;希望對您有用&#xff01;介紹QrCodeGenerator 是開源的 .NET 二維碼生成庫&#xff0c;它支持從文本字符串和字節數組生成二維碼圖片。這個庫是基于 .NET Stan…
閱讀更多...
vue循環中的v-show

vue循環中的v-show

v-show如果使用循環對象的屬性來時控制, 這個屬性必須是加載時就存在的 <div class"list-group col-sm-12" v-for"(issue,index) in issue_list"><a click"switch_comments(issue, index)" style"background-color:#5cb85c;font-w…
閱讀更多...
C# 圖片畫矩形，添加文字

C# 圖片畫矩形，添加文字

1.初始設置字體與筆 Pen pen new Pen(Color.FromArgb(220, Color.Green), 5);Font font new Font("微軟雅黑", fontSize, FontStyle.Bold); // 定義字體Brush whiteBrush new SolidBrush(Color.FromArgb(220, Color.Red)); // 畫文字用 2.初始設置圖片和Graphics …
閱讀更多...
全量更新和增量更新_增量BIOS更新或直接更新到最新版本哪個更好？

全量更新和增量更新_增量BIOS更新或直接更新到最新版本哪個更好？

全量更新和增量更新There are few things as irritating as a Blue Screen of Death, but sometimes there is an easy fix for it like updating the BIOS for instance. If multiple updates are available though, do you do incremental updates or can you just use the l…
閱讀更多...
BZOJ4590: [Shoi2015]自動刷題機

BZOJ4590: [Shoi2015]自動刷題機

【傳送門&#xff1a;BZOJ4590】 簡要題意&#xff1a; 有l秒時間&#xff0c;AC了k道題&#xff0c;給出每秒寫的代碼行數&#xff08;行數>0表示寫&#xff0c;<0表示刪除&#xff0c;如果剩下的行數不夠刪&#xff0c;則為0&#xff09;&#xff0c;假設行數>n時能…
閱讀更多...
[Office 2010 易寶典]什么是Office Web App？如何在線查看Office文檔？

[Office 2010 易寶典]什么是Office Web App？如何在線查看Office文檔？

什么是Office Web App&#xff1f; Office Web App使得Microsoft Office能擴展到網絡瀏覽器上。用戶可以直接在通過瀏覽器在線查看和編輯保存在網站上的文檔。 如何上傳Office文檔&#xff1f; 在Microsoft Word 2010里面&#xff0c;您可以把Word文檔保存到Windows Live SkyDr…
閱讀更多...
Pipy：保護 Kubernetes 上的應用程序免受 SQL 注入和 XSS 攻擊

Pipy：保護 Kubernetes 上的應用程序免受 SQL 注入和 XSS 攻擊

注入攻擊在 OWASP Web 應用 10 大安全風險[1] 排名 2021 年下滑至第 3 位&#xff0c;多年來一直位居前十。SQL 注入 (SQLi) 是一種用于攻擊網站和 Web 應用程序的常見注入技術。沒有將用戶輸入與數據庫命令完全分開的應用程序面臨著將惡意輸入作為 SQL 命令執行的風險。成功的…
閱讀更多...
docker 開啟命令\退出容器

docker 開啟命令\退出容器

開啟 docker load -i test.tar docker imagesdocker run -it -p 8000:80 test //8000為訪問ip 的端口 80 為test設置的端口 docker rename 原容器名 新容器名訪問IP 為 localhost:8000 退出容器 如果要正常退出不關閉容器&#xff0c; 請按CtrlPQ進行退出容器
閱讀更多...
如何阻止YouTube在iOS，Android和Web上自動播放視頻

如何阻止YouTube在iOS，Android和Web上自動播放視頻

Over at YouTube, they love it when you watch more YouTube. If you’re sick of YouTube automatically queuing up more videos for you, however, it’s easy enough to turn the autoplay feature off and go back to watching your videos at your own pace. 在YouTube上…
閱讀更多...
(php)thinkphp3.2配置sql_server

(php)thinkphp3.2配置sql_server

(php)thinkphp3.2配置sql_server 標簽&#xff1a; php thinkphp sql_server2016年12月16日 15:20:19631人閱讀 評論(0) 收藏 舉報分類&#xff1a;php&#xff08;18&#xff09; 最近要整一個crm和erp的對接&#xff0c;最坑的是&#xff0c;erp的是用.net寫的&#xff0c;數…
閱讀更多...
viewData

viewData

viewdata[alert]"alert(你好)"<script>viewdata[alert]</script> 在Controller存儲數據 在 界面得到 關于 ViewData和ViewMode 點擊這里 http://wanshiqian1221.blog.163.com/blog/static/6872130420095242016546/
閱讀更多...
Blog.Core 第四季度開源更新說明書

Blog.Core 第四季度開源更新說明書

B/C/V/PAn open-source organization based on .NET/Core and Vue (React/NG) to quickly build MVC & SPA and microservice application.開源貢獻NETCORE架構設計BCVP開發組成員說&#xff1a;BCVP是以Blog.Core為核心框架設計的一整套前后端分離、RBAC與數據鑒權、統一C…
閱讀更多...
關于HibernateDaoSupport中的getHibernateTemplate().execute及executeFind方法

關于HibernateDaoSupport中的getHibernateTemplate().execute及executeFind方法

轉自&#xff1a;https://blog.csdn.net/angus_17/article/details/8501668 1. 這兩個方法都是為了Spring在接管Hibernate之后&#xff0c;可以對HibernateDaoSupport進行靈活的擴展而用的。 二者的主要區別在于&#xff0c;execute返回的是一個Object&#xff0c;而executeFin…
閱讀更多...
bootstrap筆記

bootstrap筆記

1.整體排版 <div class"container"><div class"row"><div class"col-md-offset-3 col-md-6"><div class"panel panel-primary"><div class"panel-heading"><h3 class"panel-title&q…
閱讀更多...
最新文章

Copyright @ 2022~2023