zoukankan      html  css  js  c++  java
  • 任意大小图片+文字,垂直水平居中显示

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>图片文字,垂直水平居中显示</title>
    <style type="text/css">
    .picbg{
    background-size: contain;display: block;border:1px solid #e3e3e3; 25%;
    margin: 0 5%;height:250px;
    position: relative;overflow: hidden;float: left;
    }
    .picbg img{
    display:block;
    background: red;
    margin: 0 auto;
    max- 100%;超出宽度的图片限制最大显示宽度
    max-height:250px;//超出高度的图片限制最大显示高度
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    .picbg .title{
    100%;height: 100%;position: absolute;top:0;
    text-align: center;
    }
    .picbg .title>div{
    100%;
    position: absolute;top:50%;margin-top: -39px;
    }
    .picbg .title p{
    font-size: 26px;color: #6c6c6d;height: 26px;
    text-align: center;line-height: 26px;
    }
    </style>
    </head>
    <body>

    <div class="picbg">
    <div class="courseLive"></div>
    <img src="img/3.jpg" alt="1" class="center">
    <div class="title">
    <div><p>城市风格</p></div>
    </div>
    </div>
    <div class="picbg">
    <div class="courseLive"></div>
    <img src="img/a.png" alt="2" class="center" >
    <div class="title">
    <div><p>城市风格</p></div>
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    C#中自动增量字段值的获取方法
    Mio改造第一步
    酒后
    阳朔自驾行-行程篇
    如何在C#中获取新插入的identity列值
    格格生了
    扯皮
    nPdl的翻译
    asp.net和asp的互相调用
    NetBPM前进了一步,解决了上一个问题
  • 原文地址:https://www.cnblogs.com/luckyuns/p/6273467.html
Copyright © 2011-2022 走看看