zoukankan      html  css  js  c++  java
  • 几种垂直居中的方式及CSS图片替换技术

    由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单。

    方法一:

    在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px   0;

    以上方法针对块级元素和行内元素都可以。

    方法二:

    line-height:(只针对行内元素可行)

    将行高设置成和父元素的高度相等,就可以实现行内元素的垂直居中了。

    由于行内元素的对其方式是基线对齐,所以当图片和文字位于一列时,呈现出来的效果往往不是我们想要看到的样子,

    我们要想将里面的元素都实现垂直居中,就应该分别对每个元素设置vertical-align:middle,还应该把元素的行高都设置为父元素的高度,

    这样每个元素都能实现垂直居中。

    如果是块级元素想要用此方法实现垂直居中,则应该对其设置:display:inline-block;

    方法三:

    对父元素设置:position:relative;

    对元素本身:

    假设元素的高度为100px,如下:

          position:absolute;

          top:50%;

          margin-top:-50px;

    top设置为50%之后,元素的顶部会出现在父元素高度的一半处,再用margin-top设置元素往上移动本身一半的高度,就可以实现垂直居中了。

    css图片替换技术:

    css图片替换技术利于搜索引擎识别网站的信息:
        为了保障可阅读性、搜索优化以及性能优化,我们不方便直接使用 img 标签来加载图片,
        而是使用 CSS 设置背景图片来达到替换文字的效果;
        .hide-­‐text  { 
                overflow:  hidden; 
                text-­‐indent:  100%; 
              white-­‐space:  nowrap; 
            } 
            .mylogo  { 
                display:  block; 
                  88px; 
                height:  31px; 
                background:  url(img/logo.jpg)  no-­‐repeat; 
            }
        <a  class="hide--text  mylogo"  target="_blank"  href="http://ciaoca.com">ciaoca</a>

        还可以通过设置行高来实现隐藏文字,比如:
        .hide-­‐text  { 
                overflow:  hidden; 
                line-height:500px; 
              white-­‐space:  nowrap; 
            } 

  • 相关阅读:
    Spring加载xsd引起的问题小记
    kafka配置参数
    nginx常见内部参数,错误总结
    从毕业到现在的总结
    storm坑之---传递对象
    Java多线程读取大文件
    webpack4.0.1安装问题及解决方法
    git入门篇shell
    less教程
    原生js的ajax请求
  • 原文地址:https://www.cnblogs.com/hongxuejiao/p/4947697.html
Copyright © 2011-2022 走看看