图片与文字在div里实现垂直水平都居中
第一种方法,利用盒布局实现
<style type="text/css">/*盒布局实现图片与文字水平垂直居中*/
.div1{
width: 100%;
height:100px;
background: yellowgreen;
display:-moz-box;
-moz-box-align:center;
-moz-box-pack:center;
}
</style> <div class="div1">
<img src="xmpho-tag.png" style="vertical-align: middle">
<span>盒布局实现图片与文字水平垂直居中</span>
</div>
第二种,非盒布局实现
<style type="text/css">
.div2{
width: 100%;
height:100px;
background: yellowgreen;
text-align: center;
line-height: 100px;
}
</style> <div class="div2">
<img src="xmpho-tag.png" style="vertical-align: middle">
<span>非盒布局实现图片与文字水平垂直居中</span>
</div>
图片与文字在div里实现垂直水平都居中的更多相关文章
- 让一个小Div(子)在大Div(父)中垂直水平都居中
方法1: .parent { width:800px; height:500px; border:2px solid #000; ...
- css 如何使图片与文字在div中居中展示?
1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...
- 实现图标Icon+文字在div里自动中心居中(水平垂直居中)
已知div行高设置text-align:center文字会自动居中. 通过:before来设置icon的地址和高宽. 需要设置图片默认的垂直居中条件,与文字一致,为text-bottom. 设置图片行 ...
- 拖拽图片到另一个div里
HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 如何让一个DIV水平,垂直方向都居中于浏览器?
<style type="text/css"><!-- div {position:absolute;top:50%;left:50%;margin:-150px ...
- CSS垂直水平完全居中手册
水平居中 内联元素(inline or inline-*)居中? 你可以让他相对父级块级元素居中对齐 .center-children { text-align: center; } 块级元素(blo ...
- 实现CSS样式垂直水平完全居中
1.水平居中 a.内联元素(inline or inline-*)居中? 你可以让他相对父级块级元素居中对齐 .center-children { text-align: center; } b.块级 ...
- 如何将一个div盒子水平垂直都居中?
html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...
- DIV+CSS 让同一行的图片和文字对齐【转藏】
DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...
随机推荐
- iOS中的下载管理器(支持断点续传)
在空闲时间自己编写了一个简单的iOS下载管理器.该管理器实现如下功能: 1.能够支持正常的下载,暂停,继续操作. 2.支持断点续传,实现暂停执行继续操作后,依然能正常将文件下载完成. 3.实现实时状态 ...
- C语言中命名空间的实现
foobar.h // inclusion guard #ifndef FOOBAR_H_ #define FOOBAR_H_ //// long names //int foobar_some_fu ...
- P - A + B(第二季水)
Description 读入两个小于100的正整数A和B,计算A+B. 需要注意的是:A和B的每一位数字由对应的英文单词给出. ...
- 运行加速多线程和GPU
http://blog.csdn.net/augusdi/article/details/11883003
- Oracle数据库中如何选择合适的索引类型 .
索引就好象一本字典的目录.凭借字典的目录,我们可以非常迅速的找到我们所需要的条目.数据库也是如此.凭借Oracle数据库的索引,相关语句可以迅速的定位记录的位置,而不必去定位整个表. 虽然说,在表中是 ...
- DOMDocument类文件
http://php.net/manual/en/class.domdocument.php <?php $xml = <<< XML <?xml version=&qu ...
- 关于MySQL性能的比较
需求:在传递一组职位编号的时候,需要统计该职位的 当天的投递情况 和 有历史记录以来总的投递量 解决方案一: 每次都进行一次数据库查询,遍历职位id,再根据职位id去查询相应时间内的投递量 /** * ...
- 新版703n刷openwrt
自带的官方固件: 3.17.1 Build 140120 Rel.56593n WR703N v1 00000000 在不能web页面刷固件,因为带了校验功能. 老外给出了不上TTL刷路由的方法: h ...
- Delphi在Webbrowser上绘制图像
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...
- android textView 折叠 展开 ExpandableTextView
项目过程中可能会用到可以折叠和展开的TextView , 这里给出一种实现思路,自定义控件. package com.example.expandtextviewdemo; import androi ...