`
- 浏览:
239720 次
- 性别:
- 来自:
南京
-
<Div>垂直居中及容器内图片垂直居中的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>
分享到：
相关推荐
在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`<div>`元素是一...
设置`margin-left`和`margin-right`为`auto`，可以使`<div>`在父容器中水平居中。例如： ```css .centered-div { width: 200px; /* 元素的宽度 */ margin: 0 auto; /* 自动左右外边距实现居中 */ } ``` 2. **...
### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中，实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说，这相对容易实现。但对于那些高度未知或者动态变化的元素，尤其是嵌套在另一个未知...
在网页设计中，"绝对居中div层"是一种常见的布局技术，用于使一个div元素在容器内保持垂直和水平居中的状态。这种技术对于创建响应式设计、弹出框、对话框或者任何需要在页面中心展示的内容至关重要。下面将详细阐述...
本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:absolute实现水平垂直居中 使用position:absolute可以将DIV元素水平垂直居中，方法是将DIV元素的left和top属性设置为50%，然后通过margin-...
这样，图片将在其容器内水平和垂直居中。 另外，如果您的项目需要支持较旧的浏览器，可以使用CSS的绝对定位方法。这种方法需要设置容器为相对定位（`position: relative`），然后将图片设置为绝对定位，并将其`top`...
### CSS 水平垂直居中的实现方法 在前端开发中，经常需要将元素在页面中进行水平垂直居中处理，特别是在响应式布局或者需要精确控制元素位置的情况下尤为重要。本篇文章将详细介绍如何通过 CSS 实现内容的水平垂直...
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效<br>需要掌握的八个CSS布局技巧<br>用css实现链接经过时显示浮动图片背景的效果<br>自适应大小的CSS圆角盒子<br>div+css实现Firefox和IE6兼容的垂直居中...
这种方法适用于单行文字，但是在 Internet Explorer 6 及以下版本中，不支持对图片设置垂直居中。 2. 多行未知高度文字的垂直居中 对于多行文字，可以使用 padding 属性设置上下的 padding 值相同，以实现垂直居中...
通过上述介绍，我们了解到实现DIV居中的方法有很多种，包括使用`text-align: center;`、`margin-right: auto;`和`margin-left: auto;`等CSS属性，以及使用Flexbox或Grid布局。选择哪种方法取决于具体的应用场景和...
div框水平垂直居中跟内容垂直居中
然而，此属性只适用于具有`inline`或`table-cell`显示类型的元素，例如`<td>`、`<th>`、`<img>`等，而对于`<div>`、`<span>`这类块级元素则无法直接应用。接下来，我们将详细介绍几种实现`div`垂直居中的方法。 ...
这种方法在大多数浏览器中都能正常工作，但需要注意的是，对于IE6及以下版本，它不适用于图片的垂直居中。 2. **多行未知高度的文字垂直居中** 如果内容的高度是可变的，我们可以利用`padding`来模拟垂直居中。...
在网页设计中，将图片在div中垂直和水平居中是一项常见的需求，这涉及到CSS布局技术的运用。本文将深入探讨如何使用最简单的方法来实现这个目标，同时也会涉及JavaScript（JS）的一些特效，尽管在描述中没有明确指出...
在网页设计中，实现元素的垂直居中和水平居中是一项常见的需求，这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的...
在学习DIV+CSS时，许多新手都会遇到一些常见的问题，本文总结了八个常见的问题和解决方案，涵盖了网页居中显示、文字垂直居中显示、图片垂直居中显示、清除浮动、多列结构的DIV写法、Textarea在FireFox中不能自动...
例如，使用Flex布局创建一个水平居中的`<div>`： ```css .container { display: flex; justify-content: center; align-items: center; } ``` `<div>`还可以与其他元素组合使用，如与`<header>`、`<footer>`、`...
在网页设计领域，"div+css居中"是一种常见的布局技术，用于使元素在网页上水平或垂直居中对齐。这种技术利用HTML中的`<div>`元素作为容器，结合CSS（Cascading Style Sheets）样式来实现内容的定位。在本教程中，...
这种方法通过将外层`<div>`的`display`属性设置为`table`，内层`<div>`的`display`属性设置为`table-cell`，并使用`vertical-align: middle;`来实现垂直居中。优点是内容高度可变，无需预先设定。但遗憾的是，此方法...