使用 CSS 布局小技巧

时间：2024-03-28 23:00:18浏览次数：26

标签：布局居中行内技巧 text align 元素若子 CSS

行内元素、行内块元素，可以被父元素当作文本处理
例如：下列可以用于上述元素，text-align,line-height,text-indent
如何让子元素，在父亲中水平居中

若子元素是块元素，给父元素加上margin:0 auto;
若子元素是行内元素、行内块元素给父元素加上text-align: center;

如何让子元素，在父亲中垂直居中

若子元素是块元素，给子元素加上margin-top，值为 (父亲content-子元素盒子的总高)/2
若子元素是行内元素、行内块元素
- 让父元素的 **heighy=line-height*，每个元素都加上vertical-align: middle
- 若想要绝对垂直居中，父亲元素的 font-size: 0

标签：布局,居中,行内,技巧,text,align,元素,若子,CSS
From： https://www.cnblogs.com/BY1314/p/18102783

手把手教你做阅读理解题-初中中考阅读理解解题技巧004-A new way of working-一种新型
PDF格式公众号回复关键字:ZKYD004阅读理解技巧，在帮助读者有效获取和理解文本信息方面发挥着重要作用，熟练掌握如下6个技巧，可快速突破阅读理解1预览文章结构在开始深入阅读之前，快速浏览文章的标题、段落开头和结尾，可以迅速把握文章的主题、大致内容和结构标题通常能概括文章......
C++ 字符串完全指南：学习基础知识到掌握高级应用技巧
C++字符串字符串用于存储文本。一个字符串变量包含由双引号括起来的一组字符：示例创建一个string类型的变量并为其赋值：stringgreeting="Hello";C++字符串连接字符串连接可以使用+运算符来实现，生成一个新的字符串。示例：stringfirstName="John";stringlastN......
Android启动优化、布局优化必经之路—如何精准获取页面绘制时间
});}该方法实现比较简单，通过添加idleHandler的方式，发送一个任务，该任务只有在线程处于空闲的状态下会被调用方法二@OverrideprotectedvoidonResume(){super.onResume();finallongstart=System.currentTimeMillis();getWindow().getDecorView().post(newRun......
PHP代码审计（三）——方法技巧
前期准备源码，环境网站目录结构主目录模块目录插件目录上传目录模板目录数据目录配置目录配置文件：一般类似config.php等文件。保存一些数据库相关信息、程序的一些信息。先看看数据库编码，如果是gbk则可能存在宽字节注入。如果变量的值用双引号、则可能存在双引号解析代......
【CSS浮动属性】别再纠结布局了！一文带你玩转CSS Float属性
在网页设计的世界里，CSS浮动属性（float）就像一把双刃剑。它能够让元素脱离文档流，实现灵活的布局，但如果处理不当，也可能引发一系列布局问题。今天，我们就来深入探讨这把“剑”的正确使用方法，让你的页面布局既美观又稳定。一、什么是CSS浮动属性浮动属性是CSS中的一个定位属性，它允许元......
SVG描边 - CSS3实现动画绘制矢量图
使用SVG的stroke-dasharray及stroke-dashoffset，结合CSS3animation实现画笔绘制矢量图的动画效果，如下：html<svgxmlns="http://www.w3.org/2000/svg"pointer-events="none"class="leaflet-zoom-animated"width="1452"heigh......
传奇私服低等级战士PK技巧全面解析
在新开传奇私服发布网中三职业战士职业是PK当中的主力军，传奇私服这个游戏有一个特点就是无论你等级多少都可以直接进行PK。没有复杂的PK申请系统，但是我们很多的玩家朋友对这个游戏的PK技巧不是非常了解，今天我们就来和大家一起详细分析一下，传奇私服中低等级战士的PK技巧。低等......
css水珠效果
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>......
CSS的使用——常用选择器的用法
CSS选择器用于选择要样式化的HTML元素。下面介绍常见的CSS选择器用法。1.通配选择器*{margin:0;padding:0;}2.元素选择器h1{color:blue;}3.类选择器.my-class{font-size:16px;}4.ID选择器#my-id{background-color:ligh......
HTML，CSS简单命令操作
HTML、HTML5标题标签、段落标签<h1 id="title" class="title"> 标题</h1><p> 第一个段落</p>水平线<hr>按钮标签<button>按钮</button>给按钮添加属性（效果：点击按钮则变换）注：点击效果也涉及了JavaScript......

使用 CSS 布局小技巧

相关文章

赞助商

阅读排行