CSS讓圖片垂直居中和底端對(duì)齊的代碼
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2008-10-17 19:24:33 作者：佚名 
我要評(píng)論
我要評(píng)論本CSS教程提供了兩種對(duì)齊方式即垂直居中對(duì)齊和底端對(duì)齊！更多內(nèi)容請(qǐng)參考本站的CSS視頻教程。
CSS使圖片垂直居中的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d
本CSS教程提供了兩種對(duì)齊方式即垂直居中對(duì)齊和底端對(duì)齊！更多內(nèi)容請(qǐng)參考本站的CSS視頻教程。
CSS使圖片垂直居中的代碼：
<!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" lang="zh-CN">
<head>
<title>圖片垂直居中</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="all">
div,img{margin: 0;padding: 0;border: 0;}#content{width: 303px;height: 404px;background: #F63;color: #000;font: 12px Arial,Helvetica,sans-serif;position: relative;}#content[id]{display: table;position: static;}#middle{position: absolute;left: 0;top: 50%;}#middle[id]{display: table-cell;vertical-align: middle;position: static;}#inner{position: relative;left: 0;top: -50%;}
</style>
</head>
<body>
<div id="content">
<div id="middle">
<div id="inner">垂直居中<br />
<img src="http://www.fzitv.net/images/logo.gif" _fcksavedurl="http://www.fzitv.net/images/logo.gif" alt="腳本之家logo" title="腳本之家logo" /></div>
</div>
</div>
</body>
</html>
演示效果如下：
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
CSS使圖片底端對(duì)齊的代碼：
<!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" lang="zh-CN">
<head>
<title>圖片底端對(duì)齊</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="all">
div,img{margin: 0;padding: 0;border: 0;}#content{width: 303px;height: 404px;background: #F63;color: #000;font: 12px Arial,Helvetica,sans-serif;position: relative;}#content div{position: absolute;left: 0;bottom: 0;}
</style>
</head>
<body>
<div id="content">
<div>底端對(duì)齊<br />
<img src="http://www.fzitv.net/images/logo.gif" _fcksavedurl="http://www.fzitv.net/images/logo.gif" alt="腳本之家logo" title="腳本之家logo" /></div>
</div>
</body>
</html>
演示效果如下：
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
相關(guān)文章
css實(shí)現(xiàn)文本和div居中對(duì)齊詳細(xì)講解示例
這篇文章主要介紹了css實(shí)現(xiàn)文本和div居中對(duì)齊詳細(xì)講解示例,需要的朋友可以參考下2014-05-05通過position定位實(shí)現(xiàn)div底端對(duì)齊
這篇文章主要介紹了通過position定位實(shí)現(xiàn)div底端對(duì)齊，感興趣的朋友可以參考下2014-04-02多個(gè)div中table的tdwidth設(shè)置一樣也不法對(duì)齊
最近發(fā)現(xiàn)多個(gè)div中table的td就算調(diào)成一樣的width也無法對(duì)齊，后來發(fā)現(xiàn)了解決方法，提到table-layout: fixed，經(jīng)設(shè)置效果相當(dāng)不錯(cuò)，大家可以參考下2014-03-28圖片在div中垂直和水平同時(shí)對(duì)齊的實(shí)現(xiàn)方法
這篇文章主要介紹了關(guān)于圖片在div中垂直和水平同時(shí)對(duì)其的問題，下面有個(gè)不錯(cuò)的解決方法，大家可以參考下2014-03-28DIV和SPAN垂直居中對(duì)齊的實(shí)現(xiàn)方法
DIV和SPAN如何垂直居中對(duì)齊，水平居中很簡(jiǎn)單，設(shè)置text-align:center就可以了，垂直居中一直很是疑惑，下面為大家解惑2014-02-20將一個(gè)絕對(duì)定位的div水平垂直居中對(duì)齊
在某些時(shí)候可能需要將一個(gè)絕對(duì)定位的div在它的父對(duì)象中垂直居中對(duì)齊，可能用到的頻率不是太高，但是偶爾也會(huì)用到，下面就簡(jiǎn)單介紹一下如何實(shí)現(xiàn)此功能2014-01-27div中加入span右對(duì)齊后出現(xiàn)換行顯示兩種解決思路
div中加入span右對(duì)齊后，出現(xiàn)了換行問題，一般思路的話一定是認(rèn)為通過分開兩列，一個(gè)align=left,另一個(gè)align=right；很是疑惑，于是利用閑暇時(shí)間，搜索整理下，曬出來 2012-12-19 div中子div在firefox ie 水平居中對(duì)齊
div 水平居中的實(shí)現(xiàn)方法。2009-10-15這篇文章主要為大家詳細(xì)介紹了html5 div布局與table布局，區(qū)分div布局與table布局的異同,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-16學(xué)習(xí)DIV+CSS網(wǎng)頁布局之三列布局
學(xué)習(xí)DIV+CSS網(wǎng)頁布局中的三列布局，本文為大家分享的是DIV+CSS網(wǎng)頁布局教程的第三篇，感興趣的小伙伴們可以參考一下2016-03-15最新評(píng)論
大家感興趣的內(nèi)容
- 1HTML設(shè)置超鏈接字體顏色和點(diǎn)擊后的字體顏色
- 2div水平垂直居中的完美解決方案
- 3css設(shè)置各種中文字體如雅黑、黑體、宋體、楷體等等
- 4CSS 文本字體顏色設(shè)置方法(CSS color)
- 5CSS自定義select下拉選擇框的樣式(不用其他標(biāo)簽?zāi)M)
- 6CSS 漂亮搜索框美化代碼
- 7css 中的background:transparent到底是什么意思有什么
- 8CSS圓角效果 -webkit-border-radius(CSS3中border-rad
- 9CSS 首行縮進(jìn)兩個(gè)文字
- 10css textarea 高度自適應(yīng),無滾動(dòng)條
最近更新的內(nèi)容
- CSS背景色鏤空技術(shù)實(shí)際應(yīng)用及進(jìn)階分享
- CSS3打造的現(xiàn)代交互式登錄界面詳細(xì)實(shí)現(xiàn)過程
- CSS普通流、浮動(dòng)與定位網(wǎng)頁布局三大機(jī)制及最佳實(shí)踐
- css實(shí)現(xiàn)角標(biāo)效果并帶有文章或圖標(biāo)效果(完整代碼)
- CSS Anchor Positioning重新定義錨點(diǎn)定位的時(shí)代來臨(
- CSS中的Static、Relative、Absolute、Fixed、Sticky的
- CSS place-items: center解析與用法詳解
- CSS實(shí)現(xiàn)元素?fù)螡M剩余空間的五種方法
- CSS中前端單位 px、vw、vh 等的區(qū)別與使用建議
- CSS 樣式表的四種應(yīng)用方式及css注釋的應(yīng)用小結(jié)
永嘉县| 天祝| 巴塘县| 玛纳斯县| 盐亭县| 阳江市| 拉孜县| 左贡县| 龙陵县| 沿河| 剑阁县| 辉南县| 武汉市| 无棣县| 绥阳县| 泉州市| 新竹县| 麟游县| 抚松县| 利川市| 怀宁县| 石嘴山市| 白朗县| 金湖县| 连城县| 新营市| 繁昌县| 成都市| 蚌埠市| 商丘市| 内江市| 延川县| 隆林| 孟津县| 寿光市| 广东省| 南川市| 鄄城县| 峡江县| 平定县| 榆中县|