css绝对定位之对齐居中版心内容

假如我想让一个盒子固定在我中部版心位置，应该怎么办呢？
方法如下：
没有定位之前，他们是普通的两个盒子，html代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="fixed.css">
</head>
<body><div class="nav"></div><div class="box"></div>
</body>
</html>

css（fixed.css）代码如下：

.box {width: 800px;height: 800px;background-color: pink;margin: 0 auto;
}
.nav {width: 150px;height: 300px;background-color: powderblue;
}

此时的运行结果：

这不是我们想要的，我们想要小盒子靠在大盒子右部。应该怎么做呢？
只要改ｃｓｓ就可以啦。。
ｃｓｓ代码如下：

.box {width: 800px;height: 800px;background-color: pink;margin: 0 auto;
}
.nav {width: 150px;height: 300px;background-color: powderblue;position: fixed;left: 50%;margin-left: 400px;
}

运行结果如下：

设置大盒子高度更大，滚动条滚动的时候小盒子位置也不会变哟，这是你想要的效果吗？

方法总结：

在小盒子上设置固定定位先：ｐｏｓｉｔｉｏｎ：ｆｉｘｅｄ
让小盒子先占整个浏览器左边５０％的距离。ｌｅｆｔ：５０％
再让小盒子距离大盒子左边距根据实际调整就好啦（大于等于大盒子宽度一半，则到大盒子右边啦）

css绝对定位之对齐居中版心内容相关推荐

html绝对定位怎么页面居中,css绝对定位如何居中？css绝对定位居中的四种实现方法...
在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法. css绝对定位居中的实现方法有 ...
css绝对定位如何居中？css绝对定位居中的四种实现方法-web前端教程
在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法. css绝对定位居中的实现方法有 ...
css 多行文字左对齐,纯CSS实现文字一行居中，多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...
android的文本框内容居中显示图片,DIV+CSS中让布局居中_背景图片居中_文字内容居中...
在DIV CSS布局的页面里,从布局内容到页面里文章文字居中都是非常重要的,而 1.首先介绍使用css属性让整体布局的居中: 设置对象的父级内容居中,这里一个页面的为父级是什么呢?我们可以想象整个页面 ...
[css] 实现单行文本居中和多行文本左对齐并超出显示“...“
[css] 实现单行文本居中和多行文本左对齐并超出显示"-" .one {text-align: center }.multi {overflow: hiddentext-over ...
[css] 怎样把一个div居中？怎样把一个浮动元素居中？怎样把绝对定位的div居中？
[css] 怎样把一个div居中?怎样把一个浮动元素居中?怎样把绝对定位的div居中? 主要用到:text-alin: center;margin: 0 auto;position: relative ...
html文字纵向居中对齐,css怎么把文字居中对齐？
css怎么把文字居中对齐?下面本篇文章就来给大家介绍一下使用CSS设置文字居中对齐的方法,希望对大家有所帮助. 在CSS中设置文字居中对齐的方法:使用text-align属性来使文字水平居中使用li ...
如何在div中将绝对定位的元素居中？
我需要在窗口中心放置一个div (带有position:absolute; )元素. 但是我遇到了问题,因为宽度未知 . 我试过了但是,由于宽度是响应性的,因此需要对其进行调整. .center { ...
css text top,text-align属性(css中文本对齐属性)
text-align属性设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...

css绝对定位之对齐居中版心内容

css绝对定位之对齐居中版心内容相关推荐

最新文章

热门文章