[HTML]<div>标签绝对定位设置内容绝对居中

最新推荐文章于 2023-08-30 20:03:26 发布
最新推荐文章于 2023-08-30 20:03:26 发布
阅读量149 收藏
点赞数
原文链接：http://www.cnblogs.com/cn23317/archive/2009/06/28/absolute_center.html
版权

绝对居中：即在客户端上任何分辨率下纵横方向均居中

涉及知识点：

CSS类、id属性定义
DIV标签绝对定位属性

样例代码：
必需的重点部分由红色标记

<html>
<head>
<title>Nice and Free CSS Template 11</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"><!--
/*   body und schrift deffinitionen */
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
#inhalt {
position:absolute;
height:200px;
width:400px;
margin:-100px 0px 0px -200px;
top: 50%;
left: 50%;
text-align: left;
padding: 0px;
background-color: #f5f5f5;
border: 1px dotted #000000;
overflow: auto;
}
p, h1 {
margin: 0px;
padding: 10px;
}
h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #564b47;
background-color: #90897a;
}
a {
color: #ff66cc;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}
--></style>
</head>
<body>
<div id="inhalt">
<p><b>centered</b><br /><br />
This area should be horizontally and vertically centered.<br />
This text stays left aligned<br />
<b>ie mac doesn’t like this! </b><br />
<a href="/">more nice and free css templates</a>
</p>
<p>
</div>
</body>
</html>

注意：#inhalt的定义中 height和width值应分别是margin中第一参数、第四参数的两倍，否则不居中。

转载于:https://www.cnblogs.com/cn23317/archive/2009/06/28/absolute_center.html

weixin_33756418
关注
CSS网页布局：div垂直居中的各种方法
12-10
另外，对于具有固定高度和宽度的`<div>`，可以使用绝对定位来实现垂直居中。这需要父元素相对定位，并设置子元素的`position`为`absolute`，然后通过`top`和`bottom`或者`transform`属性来调整： ```css .parent ...
div绝对居中的六种方法
YuzuruHa的博客
05-21 6154
在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现。 方法一:绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;） div{ background:red; position: absolute; left:50%; top:50%; transform: tr.
html绝对定位居中
weixin_52563089的博客
08-26 943
html绝对定位
html绝对定位怎么页面居中,绝对定位元素设置水平居中
weixin_35936191的博客
06-05 2247
需求：有时页面内的一些容器需要定位在特定的某个位置，但是需要容器在水平方向上面居中显示，比如页面内的一个背景图里面放置一个容器，使用margin-top不方便，就决定使用绝对定位来设置。实现方法：方法一、知道容器尺寸的前提下.element {width: 600px; height: 400px;position: absolute;left: 50%;top: 50%;margin-top: ...
html在页面上div绝对定位,html div出现在绝对定位元素之上
weixin_35715402的博客
06-05 373
我有一个父div设置为亲戚。然后我有一个子div定位绝对，它拥有几个嵌套的子div本身。与同一课程。我已经实现了我想要的布局，但是当我离开并在上面提到的部分下面开始一个新的部分/ div时，它的内容显示在上面的div之上。不知道为什么。我希望div 从一个新行开始，而不是干扰它上面的div，这正是发生的事情。我的代码如下所示。TOP SELLING PROTEIN RANGE ...
定位的概念（HTML）
原地起飞
07-31 1657
文章目录前言HTML中为什么需要定位？一、定位1.定位的组成2.定位模式1、static 静态定位 (默认)2、relative 相对定位3、absolute 绝对定位4、fixed 固定定位5、粘性定位sticky （了解）总结 前言 HTML中为什么需要定位？ 1、浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子 2、定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子 一、定位 1.定位的组成 定位=定位模式+边偏移 &nbs
div 垂直居中的多种方法详细介绍
12-13
所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，...
CSS设置DIV垂直居中的N种方法 兼容IE浏览器
12-09
所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，...
一列固定宽度布局和背景图片绝对定位
09-27
实现这一布局，可以使用HTML中的`<div>`标签，并通过CSS来定义宽度。例如，在给定的示例中，创建了一个ID为"layout"的`<div>`，并设置了宽度为720px，高度为480px，这样就定义了一个固定尺寸的容器。 接下来，我们...
html+css制作div标签增加右上角删除图标的示例代码
11-20
接着，定义了一个`.delete`类，用于表示删除图标，设置图标大小、圆角以及绝对定位，使其出现在容器的右上角。`top: -10px;`和`right: -10px;`将图标向内偏移，使其刚好位于容器的边界内。 此外，代码还包含了`<img...
错误: 找不到符号_Excel中的“$”小符号、大作用，高效完成相对引用、绝对引用...
weixin_39531378的博客
12-04 397
要说到Excel最实用、最灵活的一个符号，个人觉得是我们的引用符：“$”。它代表的是对单元格进行相对引用和绝对引用的各类操作。利用符号$，我们可以实现对单元格的灵活操作。下面我们来全方位的了解一下$符号的使用。一、什么是单元格，单元格是怎么组成的？单元格是对应表格中的一个位置，单个单元格由(列，行)两个参数从而实现坐标定位，如坐标中列就代表横坐标、行就代表纵坐标。如上图所示：序号5对应的单元格为B...
HTML定位
weixin_52173610的博客
08-30 5483
在 HTML 中，可以使用 CSS 来对元素进行定位。常见的定位方式有相对定位(relative)，绝对定位(absolute)，固定定位(fixed)，和粘性定位(sticky)。- 相对定位(relative)：元素相对于其正常位置进行定位，通过 top、bottom、left、right 属性来指定偏移量。- 绝对定位(absolute)：元素相对于其最近的已定位祖先元素(非 static 定位)进行定位，或者相对于文档的初始坐标定位。
html div相对位置,div的相对定位与绝对定位
weixin_39524741的博客
06-04 2522
这几个部分都是可以通过CSS进行指定的，当然，CSS还可以控制背景，因此，我们可以通过CSS来灵活控制我们页面的外观。二、CSS中的文档流模型所有的块元素在html文档中是按照它们出现在文档中的先后顺序排列的(当然，嵌套不在此列)，每一个块都会另起一行。如下图他们对应的html如下：div1div2div3为了定义他们的宽度、高度还有边框，我们定义如下的CSS：#div1 {border: 1px...
CSS设置DIV的绝对定位和相对定位
qq_38334516的博客
08-11 5885
首先不给div设置定位，看看他们在网页中的位置 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS中div定位</title> <style type="text/css"> .div1{ heig...
html中元素居中的五种方法
热门推荐
weixin_62889848的博客
02-18 1万+
html中元素居中的五种方法
HTML四种定位-绝对定位
Jack, what else can you do besides holding your little darling?
12-04 8135
HTML四种定位-绝对定位
H5新增标签，水平垂直居中的几种常用方法与选项卡
Penguinscan的博客
06-04 2604
H5新增了许多语义化标签，个人做出了一些整理 header   头部信息 footer   底部信息 nav     导航链接的部分 main   主体部分 section   独立的内容区块 aside   侧边栏内容 article   文章标签 mark   标记，内容显示背景颜色，可...
position:absolute绝对定位能不能使之相对于容器右对齐？ 网摘
weixin_30301183的博客
02-02 652
如果要将绝对定位元素相对父元素定位，就必须设置父元素为相对定位，如：<style type="text/css"> .a{position:relative;background:green;} .b{position:absolute;right:0;top:0;background:red;}</style><div class="a">父元素，...
绝对定位的div,如何居中
www.hohode.com
08-20 3837
from http://www.aichengxu.com/article/CSS/650_6.html div绝对定位居中这样的效果在网页设计中经常碰到，这里记录下来和大家共同学习。 下面是一个div绝对定位居中的例子，父级是相对整个html文档的： html代码： ">div绝对定位居中 css代码： #wrap{     width:200px;
在div中的<i>居中显示
最新发布
09-07
如果`<i>`的文本是默认水平排列（即不是图片或者其他自适应大小的元素），你可以将`<i>`放在一个`<span>`或`<p>`标签里，并通过CSS设置： ```css .parent-div { text-align: center; /* 使整个div内容居中 */ }...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值