`

CSS图片垂直居中方法整理集合

CSSGoogleXHTMLIEHTML 
阅读更多

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!-- 
* { margin:0; padding:0 }
div { width:500px; height:500px; border:1px solid #ccc; 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%; width:276px; height:110px }
 -->
</style>

<div>
<p>
<img src="http://www.google.com/intl/en/images/logo.gif" />
</p>
</div>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<style type="text/css">
<!-- 
body { margin:0;padding:0 } 
div { width:500px; height:500px; line-height:500px; border:1px solid #ccc; overflow:hidden; position:relative; text-align:center; margin:auto } 
div p { position:static; +position:absolute; top:50% } 
img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px; vertical-align:middle } 
p:after { content:".";font-size:1px; visibility:hidden }
 --> 
</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"> 
<style type="text/css"> 
<!-- 
* {margin:0;padding:0} 
div { width:500px; height:500px; line-height:500px; border:1px solid #ccc; 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%; width:276px; height:110px; vertical-align:middle } 
--> 
</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"> 
<style type="text/css"> 
* {margin:0;padding:0;} 
div { width:500px;text-align:center;border:1px solid #f00;line-height:500px; height:500px;font-size:500px } 
*>div{ font-size:12px } 
div img { vertical-align:middle } 
</style> 

<div> 
<img src="http://www.google.com/intl/en/images/logo.gif" /> </div>
 

display:inline-block 方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css"> 
div { display:table-cell; height:300px; width:500px; text-align:center; border:1px solid #000; vertical-align:middle }
 </style> 
<!--[if IE]> 
<style type="text/css">
 i { display:inline-block; height:100%; vertical-align:middle }
 img { vertical-align:middle } 
</style> 
<![endif]--> 

<div>
 <i></i>
 <img src="http://www.baidu.com/img/logo.gif" alt=""/> 
</div>
 

最简单当然是背景图片的方法拉。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css"> 
* {margin:0;padding:0;} 
div { width:500px;border:1px solid #f00; height:500px; background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat } 
</style> 

<div> </div>
 
分享到：
| CSS如何实现单行图片与文字垂直居中
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS图片垂直居中方法整理集合 ！(常见问题解答)

    本文主要针对这一问题，总结了多种实现CSS图片垂直居中的方法，并通过实例代码进行详细解析。 1. **利用绝对定位和负margin** 在第一段代码中，使用了绝对定位和负margin的方法来实现图片垂直居中。首先，外层`div...

    css垂直居中（方法集合）.md

    css垂直居中（方法集合）

    网页制作中的水平居中和垂直居中解决方法集合

    下面详细介绍在CSS样式定义中实现水平居中与垂直居中的方法。 首先，水平居中是一个非常常见的需求，可以通过多种CSS属性组合来实现。例如，设置元素宽度并使用margin属性来自动调整外边距。当需要在块级元素内部...

    div+css有实例,易学易懂

    - **修饰图片的水平和垂直居中**：通过`display`和`align-items`等属性。 #### 字体的综合属性 - **字体的选择**：通过`font-family`属性。 - **字体的大小**：使用`font-size`属性。 - **字体的加粗**：通过`font...

    SQL 复制表，富文本编辑器，css图片居中等等.NET知识

    至于垂直居中，则可能需要配合其他CSS属性和方法。 最后，文档讲解了CSS中滚动条overflow属性的用法。overflow属性控制当内容溢出其块级元素框时如何处理，它有两个主要值，分别是visible和scroll。如果设置为...

    让CSS兼容IE和Firefox的技巧集合

    标题中的“让CSS兼容IE和Firefox的技巧集合”是指在网页设计中，针对Internet Explorer（IE）和Firefox这两种浏览器之间CSS样式兼容性问题的解决策略。描述中的“嘿呌，IE不再是个bug”暗示了这些技巧能帮助开发者...

    div+css网页标准版式布局整理自www.aa25.cn

    10. 居中对齐：CSS提供了多种方法实现元素的水平和垂直居中，如使用`flexbox`的`justify-content: center; align-items: center;`，或者使用`grid`的`place-items: center;`，还有传统的使用负边距、绝对定位等方法...

    CSS标签大全(最终整理版).pdf

    CSS标签大全是指CSS语言中各种类型的标签的集合，本文将对这些标签进行详细的讲解和解释。 字体属性 字体属性用于控制文本的字体样式，包括字体大小、字体样式、行高、粗细、变体等。 * 字体大小（font-size）：...

    CSS兼容IE和Firefox的技巧集合

    为了使div内的内容垂直居中，可以尝试以下方法： 1. **设置`vertical-align: middle;`**：这仅适用于内联元素或表格单元格，因此不适用于块级元素。 2. **调整行高`line-height`**：将`line-height`设置为与div高度...

    jQuery的div 重直水平居中

    在CSS3中，我们可以利用`display: flex`属性来轻松地实现子元素的水平和垂直居中。创建一个包含居中div的容器，并应用以下样式： ```css .container { display: flex; justify-content: center; /* 水平居中 */ ...

    CSS将文字显示在水平线中间测试文件

    `可以让内容在网格区域内水平和垂直居中。 ```css .container { display: grid; place-items: center; } ``` 4. 使用绝对定位：对于具有固定宽度的元素，可以通过设置元素的`position: absolute;`，然后调整`...

    300道HTML、CSS习题及面试题（含答案）

    `（自动外边距，适用于块级元素的垂直居中）。 3. HTML与CSS进阶： - 如何引入外部CSS文件？使用`&lt;link&gt;`标签，例如`&lt;link rel="stylesheet" type="text/css" href="styles.css"&gt;`。 - 什么是浮动（float）和清除...

    IE与FF的CSS兼容问题大集合

    ### IE与FF的CSS兼容问题大集合 在前端开发中，不同浏览器对于CSS的支持程度不同，这往往会导致页面在不同的浏览器下显示效果不一致。本文将详细介绍Internet Explorer（IE）和Firefox（FF）两种浏览器之间常见的...

    CSS3-标签集合.pdf

    align`控制水平对齐，`text-indent`设置首行缩进，`line-height`调整行间距，`text-decoration`添加下划线、上划线或删除线，`vertical-align`用于元素的垂直对齐，如`vertical-align:middle`实现图像与文本居中。...

    CSS经验几则.rar

    它解决了传统CSS布局的一些复杂问题，如网格布局和垂直居中。 5. **Grid布局**：CSS Grid是二维布局系统，适用于复杂的网页布局，如网格、卡片布局等。它允许在行(row)和列(column)上设置精确的间距，实现更加精细...

    HTML+CSS+JS制作的垂直时光轴源码

    在这个"HTML+CSS+JS制作的垂直时光轴源码"中，开发者利用这三者来创建了一个可视化的、垂直展示的时间线，通常用于记录网站的更新历史或者展示项目进展。 首先，我们来看HTML（HyperText Markup Language）。HTML是...

    Div+CSS学习资料.zip

    居中对齐是网页设计中常见的需求，"精品css层居中.htm"可能讲解了如何利用margin、position、transform等属性将元素在页面中水平或垂直居中。 5. **CSS绘制图形** "CSS 达人 用CSS 画 的 房子.html"展示了CSS的...

Magicbox
Global site tag (gtag.js) - Google Analytics