<!-- 这里a.png必须是四边的框都有，限制，这个时候做里边文字的居中，首先在这个里边在套一个div悬浮（absolute或者float:left）,然后在这个div（必须设宽高和margin）里边的p标签在inline和text-align ，-->
<div style="height: 200px;width:800px;background:url('a.png');margin:100px auto;" id="box">
<!--<div><span>我们的好孩子</span></div> -->
<p> 我们的好孩子</p>
</div>

当div有边框图片的时候，怎么实现内部的p标签的水平和垂直居中的更多相关文章

  1. 【转】如何让DIV水平和垂直居中

    来源:http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/ 我们在设计页面的时候,经常要把DIV居中显示,而且是相对 ...

  2. 如何让DIV相对于body水平和垂直居中

    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

  3. 让DIV中的内容水平和垂直居中

    让一个层水平垂直居中是一个非常常见的布局方式,但在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的.(页面设置height:100%;是无效的),这 ...

  4. 第 23 章 CSS3 边框图片效果

    学习要点: 1.属性初探 2.属性解释 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释 CSS3 提 ...

  5. CSS第四天总结 更多的属性 圆角 边框图片 段落属性 颜色渐变 盒子阴影

    圆角边框: border-radius    一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于 ...

  6. CSS3之边框图片border-image

    CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...

  7. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  8. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  9. 从零开始学 Web 之 CSS3（四）边框图片，过渡

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. dicom网络通讯入门（2）

    第二篇,前面都是闲扯 其实正文现在才开始,这次是把压箱底的东西都拿出来了. 首先我们今天要干的事是实现一个echo响应测试工具 也就是echo 的scu,不是实现打印作业管理么.同学我告诉你还早着呢. ...

  2. 前端开发：setTimeout与setInterval 定时器与异步循环数组

    前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...

  3. 在公有云AZURE上部署私有云AZUREPACK以及WEBSITE CLOUD(五)

    (五)注册Website Cloud 1 注册Website Cloud 添加Website Cloud   连接Website Cloud 注意, endpoint 是使用Management Se ...

  4. Java多线程整理（li）

    目录: 1.volatile变量 2.Java并发编程学习 3.CountDownLatch用法 4.CyclicBarrier使用 5.BlockingQueue使用 6.任务执行器Executor ...

  5. Hibernate全套增删改查+分页

    1.创建一个web工程 2.导入jar包 3.创建Student表 4.创建实体类 package com.entity; public class Student { private Integer ...

  6. Atitit  自动化gui 与 发帖机 技术

    Atitit  自动化gui 与 发帖机 技术 1.1. Gui tech1 1.2. 自动化软件测试1 1.3. selenium attilax1 1.4. 图形脚本语言Sikuli1 1.5. ...

  7. JDBC介绍

    1.DriverManager用来建立和数据库的链接以及管理JDBC驱动程序 driverManager的常用方法 方法 描述 registerDriver(Driver driver) 在Derve ...

  8. freemarker页面中文乱码

    一.前言 简单的记录freemarker遇到的错误问题:ftl页面中文乱码 由于freemarker整合在ssm框架中,所以笔者直接贴配置代码 <beans xmlns="http:/ ...

  9. linux安装中文语言包

    相关配置如下: yum install fonts-chinese.noarch yum install m17n-db-common-cjk yum install m17n-db-chinese安 ...

  10. AEAI WM V1.5.0 升级说明，开源工作管理系统

    1.升级说明 本次AEAI WM升级内容主要是针对数通畅联推出AEAI ECP企业云联平台而升级的,其中对AEAI WM的各模块进行扩展,同时增加了移动门户版功能及为AEAI ECP提供数据服务接口. ...