• css垂直居中怎么设置?文字上下居中和图片垂直居中


      css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题。垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下。

      css文字上下居中:一、单行内容的居中。只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,再加上 over-flow: hidden 就可以了。css代码为{height: 4em;line-height: 4em;overflow: hidden;}

      优点:1. 同时支持块级和内联极元素;2. 支持所有浏览器
      缺点:1. 只能显示一行;2. IE中不支持<img>等的居中
      要注意的是:1. 使用相对高度定义你的 height 和 line-height;2. 不想毁了你的布局的话,overflow: hidden 一定要

      二、多行内容居中,且容器高度可变。也很简单,给出一致的 padding-bottom 和 padding-top 就行

      优点:1. 同时支持块级和内联极元素;2. 支持非文本内容;3. 支持所有浏览器
      缺点:容器不能固定高度

      css图片垂直居中,我们只需要在CSS样式中加入如下CSS代码:img{ vertical-align:middle;}

  • 相关阅读:
    Vue路由重定向
    Vue使用rules对表单字段进行校验
    CSS Flex弹性布局实现Div
    Leetcode5 最长回文子串
    Java中char与String的相互转换
    [剑指offer] 替换空格
    Leetode最长回文串
    JavaScript 常用正则表达式集锦
    JavaScript 函数节流
    JavaScript target 与 currentTarget 区别
  • 原文地址:https://www.cnblogs.com/ytkah/p/6424641.html
Copyright © 2020-2023  润新知