美文网首页
水平垂直居中+画一个三角形

水平垂直居中+画一个三角形

作者: 李永州的FE | 来源:发表于2017-05-27 11:47 被阅读0次

关于编码规范很好的网站编码规范
下面列举几个最常见的:

  • 不要使用import
  • 根据 HTML5 规范,在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性,因为 text/css 和 text/javascript 分别是它们的默认值
  • 减少标签的数量
    编写 HTML 代码时,尽量避免多余的父元素。很多时候,这需要迭代和重构来实现
  • JavaScript 生成的标签
    通过 JavaScript 生成的标签让内容变得不易查找、编辑,并且降低性能。能避免时尽量避免

垂直居中有几种实现方式,给出代码范例

  • 单行文本水平(text-align:center)垂直(行高line-height=div高度)居中 ,要是多行只能用padding了
    示例

  • 一个块级元素包裹多个块级元素,块级元素又有文本,只需要让父元素padding上下相等即可,
    示例

  • 一个块级元素包裹另一个块级元素,让父元素相对定位,子元素绝对定位,top和left各50%,然后 transform: translate(-50%,-50%)
    示例

  • 仍然用absoute,不过是和margin-left搭配
    示例

  • 水平居中好说,就两种块级和行内元素

  • 垂直居中:行内:(1)最常见的上下padding相等(2)dispaly:table-cell和vertical-align:middle
    块级元素:绝对定位:top:50%,然后margin-top:一半的高度或者transform:translateY(-50%)

  • 水平垂直:绝对定位或者flex

实现如下效果,每种效果都只使用一个html 标签来实现

Paste_Image.png
  • 分析:其实每个三角形状的东西都是由一个四方形的span经过
  1. 绝对定位后左右上下移动
  2. 旋转背景色设为空白Border为none等(比如3)
  3. border设置某3个透明只剩下一个三角形
    示例

相关文章

  • CSS居中布局方案

    水平居中 垂直居中 水平垂直居中

  • 常用的居中方法

    本文将介绍的居中方法有 ,水平居中,垂直居中和水平垂直居中。 一水平居中 二水平垂直居中

  • 元素居中的方式

    1 水平居中 2 垂直居中 3 水平垂直居中

  • css居中方式总结(亲测有效)

    水平居中(行内元素水平居中、块级元素水平居中) 垂直居中 水平垂直居中 行内元素水平居中 text-align: ...

  • CSS水平垂直居中总结

    CSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: 单行文字的垂直居中: 让有宽度的div水平居中:...

  • 居中布局

    水平居中 垂直居中 垂直水平居中 已知元素的宽高的居中布局 定位居中布局 盒模型居中布局 图片的垂直水平居中(利用...

  • CSS图片居中(水平居中和垂直居中)

    css图片水平居中 css图片垂直居中 css图片水平垂直居中

  • css多行垂直水平居中--table布局大法

    ======= SEO专用 table-cell 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行...

  • CSS居中大全(带截图)

    文字水平居中 图片水平垂直居中 图片与文字水平垂直居中 代码同上 DIV相对于页面垂直居中并且响应式 视口绝对垂直...

  • 居中对齐

    行内元素居中[#hang]垂直居中[#hc]水平居中[#hs] 块级元素居中[#kuai]垂直居中[#kc]水平居...

网友评论

      本文标题:水平垂直居中+画一个三角形

      本文链接:https://www.haomeiwen.com/subject/evwffxtx.html