Html之子元素居中显示的三种方式

最新推荐文章于 2023-08-06 21:03:55 发布
最新推荐文章于 2023-08-06 21:03:55 发布
阅读量739 收藏
点赞数
分类专栏： html 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43547255/article/details/124044914
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
    .d1 {
      width: 500px;
      height: 200px;
      color: red;
      background: red;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .d2 {
      width: 100px;
      height: 100px;
      color: skyblue;
      background: skyblue;
    }
    .d3 {
      width: 500px;
      height: 200px;
      color: rgb(252, 206, 206);
      background: rgb(255, 218, 218);
      position: relative;
    }
    .d4 {
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      top: 50%;
      width: 100px;
      height: 100px;
      color: skyblue;
      background: rgb(182, 135, 235);
    }

    .d5 {
      position: relative;
      width: 500px;
      height: 200px;
      color: rgb(252, 206, 206);
      background: rgb(255, 218, 218);
    }
    .d6 {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 100px;
      height: 100px;
      color: skyblue;
      background: rgb(182, 135, 235);
    }
  </style>
  <body>
    <div class="d1">
      <div class="d2"></div>
    </div>
    <div style="height:10px"></div>
    <div class="d3">
      <div class="d4"></div>
    </div>
    <div style="height:10px"></div>
    <div class="d5">
      <div class="d6"></div>
    </div>
  </body>
</html>

在这里插入图片描述

可可鸭~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
1.复合选择器 （1）后代选择器（包含选择器 重要） 语法： 元素1 元素2 {样式声明} 选择器1 选择器2{ 属性：属性值 } 元素1和元素2用空格隔开 元素1父亲 元素2后代 最终改变的是后代（元素2）的样式 选择器可以是任意的基础选择器 （2）子元素选择器（子选择器 重要） 语法 元素1>元素2{样式声明} 元素1和元素2用>隔开 元素1和元素2是父子关系 只选择父元素最近一级的子元素 即必须是亲儿子 选择器1 选择器2可以是任意基础选择器 （3）并集选择器（重要） 可以选择多组标签 定义相同样式 通常用于集体声明 语法 元素1， 元素2{样式声明} 元素1和元素2都改了样式 逗号，为和的意思 任何选择器都可以作为并集选择器 约定的语法规范：并集选择器约定竖着写 最后一个选择器不需要加逗号， （4）交集选择器 语法 选择器1选择器2选择器3{ 属性： 属性值； } 用选择器1选择元素集合A，用选择器2在A中选择元素 标签名只能写在前面并且只能有一个标签 （5）伪类选择器（只用于链接 用：表示） a:link 未访问过的链接 a:visitied 已访问过的链接 a:hover 选择鼠标经过的链接/悬停时链接 a:active 选择的是鼠标正在按下没有弹起的链接 注意：按照LVHA的顺序写 链接在浏览器中有默认样式 所以一般需要单独指定 （6）焦点选择器（对input标签） 用于选取获得焦点（光标选中）的表单元素 语法 表单元素：focus{ 属性： 属性值； } 注意： 表单元素最常用的是input 在input框选中时显示的样式 2.css的元素显示模式 html元素一般分为块元素和行内元素 （1）块级元素 div p h1-h6 ul ol li ①独占一行 ②宽度 高度 外边距 内边距都可控制 ③宽度默认是容器（父级元素）100%的宽度 ④是一个容器及盒子 里面看可以放行内或块级元素 ⑤文字类的元素如p h1-h6里面不能放块级元素 尤其是div （2）行内元素 a strong b em i del s ins u span ①相邻行内元素在一行上，一行可以显示多个 ②宽高直接设置是无效的 ③默认宽度就是他本身内容的宽度 ④行内元素只能容纳文本或其他行内元素 ⑤链接（a标签）里面不能再放链接 但可以放块级元素 比如图片 （3）行内块元素 img input td ①一行上可以有多个行内块元素 中间有空隙（行内元素特点） ②默认宽度就是他本身内容的宽度（行内元素特点） ③宽高 高度 外边距 内边距可以控制（块级元素特点） 元素显示模式的转换 （1）行内元素转块级元素 display：block；√ （2）块级元素转换为行内元素 display：inline； （3）行内块 元素 display：inline-block√、 单行文字垂直居中 文字的行高line-height=盒子高度 仅限于单行文字垂直居中 3.css的背景属性 （1）背景颜色 选择器{ background-color： transparent透明（透明）/color； } （2）背景图片（便于控制位置） 常用于logo 装饰性的小图片或者超大图片 background-image： none（默认） | url（图片地址/路径）; （3）背景平铺 background-repate: repate（默认） | no-repate | repate-x（沿x轴/横向平铺） | repate-y（沿y轴/纵向平铺）; 注意： 页面元素既可以添加背景颜色 也可以添加背景图片 只不过背景图片在背景颜色上方 即背景图片会压住背景颜色 （4）背景图片的位置 background-position: x y; ①参数是方位名词 top | center | bottom | left | center | right 方位名词 x（ left | center | right） y（top | center | bottom） background-position: 水平 垂直; background-position: center top ; background-position: top center ; 指定两个方位名词时 与顺序无关 指定一个方位名词时 没有指定的那个默认是居中对齐 ②参数是精确单位 前面x 后面y 顺序不可变 若第一个是精确单位 一定是x 则另一个垂直居中 ③混合单位 有顺序要求 第一个为x 第二个为y （5）背景固定 background-attachment: scroll | fixed ; （6）背景复合写法 background：颜色 图片地址url 平铺 滚动 位置 没有顺序要求 （7）背景色半透明 background：rgba（0,0,0,0.3）取值0-1 0.3也可以写成.3 背景色半透明 盒子里面内容不受影响
CSS 解决未知高度垂直居中实现代码
12-08
) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。 非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。 CSS 复制...
html中元素居中的五种方法
weixin_62889848的博客
02-18 1万+
html中元素居中的五种方法
html父盒子中左右居中,如何让子元素在父元素中水平垂直居中七种方法?
weixin_31508009的博客
06-19 391
html:green第一种：定位+margin:auto.container {position: relative;width: 300px;height: 300px;background: yellow;}.box {position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;width: 100px;height: 1...
html有多少种居中方式,html常用的几种居中方法
weixin_32068473的博客
06-21 2万+
前言本篇文章主要介绍如何使用 html+css 实现元素的的水平与垂直的居中效果，这是我们在网页编码过程中经常遇到的问题。布局分类一、水平居中布局效果图：1.inline-block+text-align利用 display:inlin-block 将元素设置为具有文本元素的性质，然后利用文本对齐属性 text-align 来设置对齐方式，center 即为水平对齐2.定位 + transform...
css3中四种让元素水平居中的方式
tdl081071tdy的博客
10-18 372
第一种 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
CSS初入门：设置子元素水平居中的方式
lalala_dxf的博客
04-01 5247
问题描述： 用几种方式实现元素位于父元素的水平居中位置，如图： 解决 方式一 通过控制子元素的左边框和右边框来达到居中的效果。 在那之前，我先举个我遇到过的错误示范 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam
HTML/CSS 四种实现子元素在父元素内垂直居中的方法
DanmoSAMA的博客~
11-19 1162
绝对定位和外边距 对元素开启绝对定位（包含块开启相对定位，否则是相对根元素）。 .box{ width:100px; height:100px; background-color:#bfa position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; } 缺点：要求元素的大小确定（有width和height），如果不设置，默认width和height撑开到整个页面。 Table cell和align /*box1是box2的父元素*/
如何实现标签元素在HTML页面中居中显示
cnds123的专栏
12-15 3万+
在HTML页面设计中常常需要实现标签元素在HTML页面中居中显示，本文将介绍基本做法。
子元素在父元素中水平和垂直居中的几种方法
usernameID007的博客
08-06 1754
通过将父容器的display属性设置为flex，并设置justify-content和align-items属性为center，可以使元素在父容器中水平和垂直居中。通过将元素的position属性设置为absolute，以及使用top、left、right和bottom属性，可以将元素相对于其父容器进行定位。将父容器的display属性设置为table，将子元素的display属性设置为table-cell，并使用vertical-align属性设置为middle，可以实现元素在父容器中垂直居中。
子元素相对父元素垂直居中的8大方法，CSS面试题常考
zhangxueyou2223的博客
04-24 1733
子元素相对父元素垂直居中的8大方法，CSS面试题常考，上面是基本代码样式，下面是方法整理如下，话不多说，肝着！
html入门到放弃笔记
05-15
包含的子元素(2对) 1、<title>网页的标题</title> 2、<meta charset="utf-8"/> -- 能正常显示中文 2、<body></body> 属性： 1、text ，取值是一个颜色值(red,green,blue...) 2、...
从入门到精通HTML5——PDF——网盘链接
02-27
　9.1.5　目标显示方式——target 185 　9.2 添加控件 185 　9.3　输入类的控件 186 　9.3.1　文字字段——text 186 　9.3.2　密码域——password 187 　9.3.3　单选按钮——radio 188 　9.3.4　复选框——checkbox ...
HTML5 Canvas核心技术 图形、动画与游戏开发
09-19
93 2.10.2　三次方贝塞尔曲线 95 2.11　多边形的绘制 97 2.12　高级路径操作 102 2.12.1　拖动多边形对象 102 2.12.2　编辑贝塞尔曲线 107 2.12.3　自动滚动网页，使某段路径所对应的元素显示在视窗中 115 2.13　...
html中实现元素居中的几种方法
weixin_44649210的博客
08-15 2771
第一种 使用到的重要样式属性display,vertical-align vertical-align:middle这个属性是对table元素垂直居中起作用，如果想使用在img元素上，就注意下面的display设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type=
HTML元素居中的方法
qq_59971507的博客
08-09 8824
HTML元素水平居中与垂直居中的方法总结
实现子元素在父元素中居中的三种方法(珍藏版)
liuwenjie_的博客
10-22 4765
三种方法都比较容易理解，父元素设置属性都相同，都是父元素设置后，子元素定位后再做细微调整，但最终结果也都相同，实现了居中的目的。 1、子元素宽高比父元素小的情况下，使用定位方法居中 <style> 父元素{ width:400px; height:400px; border:1px solid #000; margin 100px auto 0; position:relative; } 子元素{ width:200px; height:100px; background:yellow; pos
CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距
BADAO_LIUMANG_QIZHI的博客
03-23 2万+
场景 Flex是Flexible Box的缩写，意为”弹性布局”。 怎样使用弹性布局实现页面上下两个元素上下左右垂直居中排列。 实现如下类似布局 最外层是是一个div,div里面是上面一个照片，下面一个表单，这两个元素居中排列。 注： 博客：霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、外层div设置样式 .login { display: flex; f...
HTML之居中设置
热门推荐
木四小哥的博客
08-31 7万+
目录 水平居中 行内元素 定宽块级元素 不定宽块级元素 垂直居中 隐性改变display类型   水平居中 实际开发过程中我们会遇到很多需要元素水平居中的情况，例如文章标题等。这里常见的水平居中情况有行内元素和块级元素两种，块级元素又分为定宽块级元素和不定宽块级元素两种情况。定宽块级元素顾名思义就是块级元素的width是个固定的值；那么不定宽块级元素我们就知道是块级元素的widt...
html内容居中显示
最新发布
09-09
要使HTML内容居中显示，可以使用以下方法： 方法一：使用position和transform属性实现居中显示。将要居中的元素设置为绝对定位，并使用top和left属性将其置于父元素的中心位置。同时，使用transform属性的translate方法将元素水平和垂直居中。例如： ``` <div class="container"> <p>居中显示的内容</p> </div> <style> .container { position: relative; height: 200px; background: #ccc; display: flex; align-items: center; justify-content: center; } p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> ``` 方法二：使用text-align属性实现文本的水平居中显示。将要居中显示的元素的display属性设置为inline或inline-block，然后在父元素上使用text-align属性将子元素水平居中。例如： ``` <div class="container"> <p>居中显示的文本</p> </div> <style> .container { height: 200px; background: #ccc; text-align: center; } .container p { display: inline; } </style> ``` 方法三：使用display: table和vertical-align属性实现多行内容的垂直居中显示。将要居中显示的父元素的display属性设置为table，然后将子元素的display属性设置为table-cell，并使用vertical-align属性将子元素垂直居中。例如： ``` <div class="container"> <div> <p>居中显示的文本</p> <p>居中显示的文本</p> <p>居中显示的文本</p> </div> </div> <style> .container { height: 300px; background: #ccc; display: table; } .container div { display: table-cell; vertical-align: middle; } </style> ``` 以上是三种常用的方法来实现HTML内容的居中显示。具体使用哪种方法取决于具体的布局需求和元素结构。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可可鸭~

想吃糖~我会甜

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值