天学会html+css,第九天固定定位。
Redmi手机电视笔记本。
今天的学习目标是右侧悬浮工具栏用固定定位实现,它是相对于浏览器窗口的定位方式。
·盒子里的内容用a标签,一个图片加一行文字,此时它的位置在最底部。
·然后给它写上固定定位样式,右侧距离0,下面距离70像素,加上背景颜色,看下效果。
·开始给a标签写样式,固定宽高,text-renderin默认下划线去掉,里面内容居中,看下效果。
·图片写样式之前也要加上这行代码,然后让它的尺寸变小一点,并且左右居中,看下效果。
·文字的颜色、大小也调整一下。
·最后给a标签加上边框、内边距,让里面内容往下挪一挪。
到此,今天的学习完成。
SS 是前端里面的基础之一,也是非常重要的一部分,它往往决定了你所做出来的网页页面是否美观。在设计网页页面的过程中,总会有将元素或者文字进行水平垂直居中的要求。下面w3cschool编程狮就为大家介绍 CSS 中几种常用到的水平垂直居中的方法。
当元素有给定的高度以及宽度的时候,使用 margin: auto; 元素仅会水平居中,并不会进行垂直居中。此时就需要设置元素的 position 为 absolute,父级元素的 position 为 relative,同时元素的上下左右都需要设置为 0。
HTML 代码
<div class="box">
<div class="center1"></div>
</div>
CSS 代码
.box{
width: 200px;
height: 200px;
background-color: #eee;
position: relative;
margin-top: 20px;
}
.center1{
width: 50px;
height: 50px;
background-color: #00ACED;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
效果展示:
当已经知道了要进行水平垂直居中的元素的宽高时,就可以通过设置 position: absolute 来实现。但是,使用的同时还需要结合其他属性才完整实现。因为,单是设置 absolute,上左距离均为一半,就会出现下面这种情况。很显然可以看到,元素并不是完全居中,仅只有左上角的位置在中心点
概念图:
因此想要实现元素完全水平垂直居中,在设置了 absolute 定位后,可以设置 margin 值为负,或者使用 calc 来计算,上左距离在 50% 的基础上还要减去元素本身一半的宽高。
margin 值为负或者 calc 计算均是在已知元素宽高的情况下,假设不知道元素的宽高,那么怎么实现水平垂直居中呢?这里就可以使用 transform 属性,通过坐标位移来实现居中。
CSS 代码
/* 结合 margin */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
/* 结合 calc 计算*/
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: calc(50% - 25px)
top: calc(50% - 25px);
}
/* 结合 transform */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
效果展示
03
PART
可以通过弹性布局来设置水平垂直居中,这里需要设置父级元素 display:flex; 还需要设置两个属性,水平布局 justify-content 以及垂直布局 align-items。
HTML代码
<div class="box2">
<div class="center4"></div>
</div>
CSS代码:
.box2{
background-color: #eee;
width: 200px;
height: 200px;
position: relative;
margin-top: 20px ;
display: flex;
justify-content: center;
align-items: center;
}
.center4{
width: 50px;
height: 50px;
background-color: #B39873;
}
效果展示:
前面介绍的是元素如何实现水平垂直居中,下面介绍的是如何将文字进行水平垂直居中。这第一个方法也是最经常用的,使用文本水平对齐 text-align 和行高 line-height 来实现的。
HTML 代码
<div class="box3">
<div class="center5">文字居中</div>
</div>
CSS 代码
.box3{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
}
.center5{
text-align: center;
line-height: 200px;
}
效果展示
05
PART
第二个方法可以通过网格布局 grid 来实现。而这里通过 grid 有两种方式实现,一种对元素本身属性进行设置,另一种在元素的父级元素中设置。两者看上去内容似乎差不多,不同的是在元素中设置的是 align-self 还要多了一个 margin,父级元素中是 align-items。
相关代码:
/* grid 元素中设置 */
.box4{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
display: grid;
}
.center6{
align-self: center;
justify-content: center;
margin: auto;
}
/* grid 父级元素中设置 */
.box5{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
display: grid;
align-items: center;
justify-content: center;
}
效果展示:
以上就是关于 CSS 如何将元素或者文字进行水平垂直居中的几种常用方法,大家还其他关于 CSS 实现水平垂直居中的方法吗?请在评论区留下你的想法。
关注w3cschool编程狮订阅更多IT资讯、技术干货~
1),弹窗及参数说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="#">
</head>
<body>
<input type="button" value="打开新窗口" onclick="openNewWin()" />
</body>
<script type="text/javascript">
function openNewWin() {
var openWindow = window.open("newTest.html",
"弹到新窗口",
"height=500, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
}
/***
(00) window.open 弹出新窗口的命令
(01) newTest.html 弹出窗口的文件名,或请求地址
(02) 弹出窗口的名字(不是文件名),非必须,可用空''代替
(03) height=100 窗口高度
(04) width=400 窗口宽度
(05) top=0 窗口距离屏幕上方的像素值
(06) left=0 窗口距离屏幕左侧的像素值
(07) toolbar=no 是否显示工具栏,yes为显示
(08) menubar 表示菜单栏
(09) scrollbars 表示滚动栏
(10) resizable=no 是否允许改变窗口大小,yes为允许
(11) location=no 是否显示地址栏,yes为允许
(12) status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许
***/
</script>
</html>
(2),弹窗并居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="#">
</head>
<body>
<input type="button" value="弹出的窗口居中" onclick="testOpenCenterWindow()" />
</body>
<script type="text/javascript">
function testOpenCenterWindow() {
// 窗口垂直位置水平位置
var iTop = (window.screen.availHeight - 30 - 500) / 2;
var iLeft = (window.screen.availWidth - 10 - 800) / 2; //减width
var openWindow = window.open("newTest.html"
,"测试弹窗口并居中"
,"height=500, width=800, top="+ iTop
+", left="+ iLeft
+", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"
);
}
</script>
</html>
(3),窗口 location属性
window对象location属性是引用Location对象,它表示该窗口显示文档的URL
window.location.href="page1.jsp"; //当前窗口显示指定页面
window.close(); //关闭本页面
(4),窗口与父窗口通信
*请认真填写需求信息,我们会在24小时内与您取得联系。