<!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>
下面是背景图片居中的效果
<!--
* {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
}
分享到：
相关推荐
在CSS中，居中布局通常涉及以下几种方法： 1. **margin auto**： 这是最常见的一种居中方法，适用于知道元素宽度的情况。设置`margin-left`和`margin-right`为`auto`，可以使`<div>`在父容器中水平居中。例如： `...
本文将详细介绍如何通过CSS实现这一效果，并提供几种不同的方法来确保图片能够在不同大小的`div`容器中居中显示。 #### 基本原理 首先，我们需要理解几个关键概念： - **`div`元素**：作为容器，用来包裹图片。 - ...
CSS提供了多种方式使元素居中，对于图片在div中居中，我们可以使用以下几种方法： 1. **绝对定位**： - 设置`position: absolute;` - 使用`left: 50%; top: 50%;`将图片移动到其父元素的中心。 - 由于图片的左上...
首先，我们来探讨CSS中的几种水平垂直居中方法： 1. **Flexbox布局**：这是现代浏览器支持的一种布局方式，可以轻松实现子元素的水平和垂直居中。设置父元素的`display`属性为`flex`，然后添加`align-items: center...
下面我们将详细介绍几种常见的方法。 方法一：使用 margin:auto 这种方法是最简单的，直接将 DIV 的 margin 属性设置为 auto 即可实现水平居中。代码如下： ```css #wrap { margin: 0 auto; } ``` 这段代码的意思...
本文将深入探讨四种不同的CSS方法，用于实现图片在div容器内的垂直居中，每种方法都有其适用场景和独特之处。 ### 第一种方法：使用`table-cell`属性 这种方法的核心在于将div设置为`table-cell`，这样可以使其...
接下来，我们将详细介绍几种实现`div`垂直居中的方法。 首先，针对单行文本的垂直居中，可以通过设置`height`和`line-height`属性实现。当两者值相等时，文本行将垂直居中于容器内。例如，设置`div`的`height`和`...
要让图片在Summernote中居中，有以下几种方法： 1. **使用CSS**：你可以在你的项目CSS文件中添加针对Summernote的自定义样式，确保这些样式不会影响到其他元素。例如： ```css .note-image-handler img { ...
为了让 `centered-content` 在 `container` 内部上下左右居中，我们可以利用以下几种方法： 1. **使用 Flexbox**： Flexbox 是现代CSS布局模式，特别适合处理元素的对齐和分布。对于上下左右绝对居中，我们可以...
实现图片水平垂直居中的方法有多种，以下是几种常见且实用的方法： 1. 使用 Flexbox 布局： Flexbox 是现代CSS布局模式，适用于单行或单列的弹性容器。在父容器上设置 `display: flex;`，并使用 `align-items: ...
接下来，我们将讨论几种常见的居中方法： 1. **水平居中**： - **使用margin auto**：这是最常见的方式。为`<div>`设置`display: block;`和`margin: 0 auto;`。这将自动计算左右外边距，使元素居中。例如： ```...
本文将详细介绍几种不同的方法来实现这一目标。 首先，对于单行垂直居中的情况，我们可以利用CSS的`height`和`line-height`属性。当一个容器内只有一行文字时，如果将这两个属性值设置为相同，文字就会垂直居中。...
本文将介绍几种CSS方法来实现div表格的垂直居中。 1. **单行内容居中** 对于只有一行内容的情况，只需设置`line-height`与`height`相等，并应用`overflow:hidden`。例如： ```css .middle-demo-1 { height: 4em...
有几种方法可以实现垂直居中，例如使用Flexbox布局或者CSS Grid布局，或者传统的方法如`position: absolute`配合`transform`。 对于这个资源，它可能使用了Flexbox，这是一种现代的布局模式，允许父元素（即容器）...
对于有固定高度并且包含多行文本的`div`，可以使用以下几种方法： 1. **使用绝对定位**： 创建一个内部`div`，设置其`position: absolute; top: 50%;`，然后通过负的`margin-top`值等于内部元素高度的一半来调整。...
接下来，我们将探讨几种实现垂直居中的方法： 1. **Flexbox布局** - CSS Flexible Box Layout Module（Flexbox）是现代浏览器支持的布局模型，非常适用于创建弹性容器和元素的居中。以下代码演示了如何使用Flexbox...