利用vertical-align:middle实现在整个页面居中 - - ITeye博客

`

dengwenjun

浏览: 214165 次
性别:
来自: 深圳

最近访客更多访客>>

belle-liang

bianrongxin

4348426qq163

273286251

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

利用vertical-align:middle实现在整个页面居中

阅读更多

<!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"> 
 <head> 
     <title>404页面</title> 
 </head> 
 <body> 
     <div class="wall"> 
         <a href="index.html"><img class="img404" src="images/404.jpg" alt="404页面" /></a> 
     </div> 
 </body> 
 </html> 

<style type="text/css"> 
         body{ margin:0; background:#333; _height:100%;}  
         .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;}  
         .img404{ border:0;width:700px;}  
 </style> 

<!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"> 
  <head> 
      <title>404页面</title> 
      <style type="text/css"> 
          body{ margin:0; background:#333; _height:100%;}  
          .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center; font-size:0;}  
          .img404{ border:0; width:700px; vertical-align:middle;}  
          .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}  
  </style> 
  </head> 
  <body> 
      <div class="wall"> 
         <span class="verticalAlign"></span> 
         <a href="index.html"><img class="img404" src="images/404.jpg" alt="404页面" /></a> 
      </div> 
  </body> 
  </html>

分享到：

div | HTML5表单及其验证

2013-06-20 23:38
浏览 1949
评论(0)
分类:Web前端
查看更多

评论

发表评论

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

相关推荐

利用vertical-align:middle实现行内元素的水平垂直居中对齐: 但是，利用`vertical-align:middle`属性也能达到类似的效果，并且在某些情况下可以提供更加简洁的解决方案。首先，我们来理解`vertical-align`属性。根据W3C标准，`vertical-align`属性用于设置行内元素（inline）...

IE6下 vertical-align:middle 和 height 引发的边框消失: vertical-align:middle; height:50px;}</style> html结构：测试（注意：测试后面没有其他文字或元素）现象：div的下边框消失，在ff下没事，且文字不能居中（如图）。 html结构2测试测试文字 –在后面再加上...

text-align,vertical-align,line-height居中布局笔记: 如果想要让多个`<div>`元素在同一行中居中对齐，可以将它们的`display`设置为`inline-block`，并设置`vertical-align`为`middle`。需要注意的是，当使用`vertical-align: middle`时，通常还需要配合`line-height`...

完美居中1: `display: table-cell`将元素转换为类似于表格单元格的行为，使得`vertical-align: middle`可以生效，从而实现内容的垂直居中。对于IE6和7，使用`*display: inline-block`是为了兼容这些老版本的浏览器。 `vertical...

谷歌浏览器 div 水平对齐: 这样，我们可以用 `vertical-align: middle` 实现垂直居中，再配合 `text-align: center` 实现文字的水平居中。具体代码如下： ```html Multi-line, vertical-align:middle; text-align:center; Multi-...

CSS实例:vertical-align属性让网页层居中: 在标题“CSS实例:vertical-align属性让网页层居中”中，我们聚焦于如何利用`vertical-align`属性来实现网页内容的垂直居中。首先，了解`vertical-align`的基本用法。这个属性主要应用于`display: inline`、`...

css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明: 在示例代码中，开发者遇到了在`<li>`元素中使用`vertical-align: middle`的问题。`<li>`是块级元素，而`vertical-align`只对行内元素和表格单元格生效。因此，`vertical-align: middle`并未按预期工作。解决这个问题...

vertical-center:垂直水平居中元素: 最后，如果我们处理的是表格单元（table cell），可以使用`vertical-align: middle`属性来实现垂直居中： ```css .table-cell { vertical-align: middle; } ``` 总结来说，实现HTML元素的垂直居中有多种方法，...

CSS最常用的样式代码: - `vertical-align: middle;`: 居中对齐。 - `vertical-align: bottom;`: 底部对齐。 **5. 显示模式 (`display`):** - `display: block;`: 块级元素。 - `display: inline;`: 内联元素。 - `display: list-...

css(样式表属性): - `vertical-align: middle;` 设置元素垂直居中。 - `vertical-align: text-top;` 设置元素顶部与文本顶部对齐。 - `vertical-align: text-bottom;` 设置元素底部与文本底部对齐。 - **文本装饰（Text Decoration...

CSS设置图片的对齐方式案例.pdf: 纵向对齐方式:middle<img src=02.jpg style="vertical-align:middle"> 纵向对齐方式:sub<img src=02.jpg style="vertical-align:sub"> 纵向对齐方式:super<img src=02.jpg style="vertical-align:super"> 纵向对齐...

垂直居中显示ie7+: 在网页设计中，"垂直居中显示"是一个常见的需求，特别是在多设备、多屏幕尺寸的环境下，确保元素在页面上无论何时都能保持居中状态，能够提供良好的用户体验。本话题主要探讨如何在IE7及以上的浏览器中实现元素的...

CSS常用属性一览表: - `vertical-align: middle;`：居中对齐。 - `vertical-align: text-top;`：顶部对齐到文本的基线。 - `vertical-align: text-bottom;`：底部对齐到文本的基线。 #### 四、CSS边距属性 - **`padding`**：定义...

在网页中居中的若干种方法（至少6种，已经标明了对应浏览器，希望对你有用哦~）: ` 水平居中，而 `vertical-align: middle;` 可以垂直居中，但此方法不适用于块级元素。 5. **Margin Auto 居中** 对于块级元素，如 `div`，可以使用 `margin: 0 auto;` 来实现水平居中，但这种方法不支持垂直居中...

CSS设置文字图片垂直居中的方法总结: 然后，`vertical-align:middle`属性用于控制行内元素的垂直对齐方式，当元素的`display`设置为`inline-block`时，此属性可以将元素在垂直方向上居中对齐。具体实现步骤如下： 1. 在需要垂直居中的元素后面添加一...

浅谈css元素居中: 水平居中若为行内元素，对其父...另由可通过对表格元素td使用vertical-align:middle可对其内的元素进行垂直居中可知，通过对父元素使用display:table-cell;vertical-align:middle;也可实现对元素的垂直居中，且该种方

Global site tag (gtag.js) - Google Analytics