网站建设

我要做网站
9600套餐(B套餐+1年5词优化)
6600套餐企业精美双语
4600套餐适用于品牌企业精致
3600套餐适用于网络推广优化
2800套餐适用于企业宣传
网站改版
网站改版多少钱?
网站为什么要改版
网站升级
网站升级多少钱?
公司网站要怎么升级好?
网站维护
为什么要网站维护?
网站维护套餐
常见问题
网站为什么会被百度k掉?
网站知识
建营销型网站找嘉定网站建设
网站建设初期就要考虑SEO要点
家悠网络科技网站策划工作的重点
合作项目
网站建设-如何让一个行内元素(如一张图片)在div中居中
发布: 2018-05-14 16:33:10 编辑: 浏览:

 (1)第一种:用vertical-align

<div class="method1">   <span class="tiptop"></span>   <img class="test" src="img/Dota2.jpg" alt="dota2"> </div>   <style> .method1{
  text-align:center;
}
/*vertical-align:middle  是依赖div内子元素最高的行高来实现对某元素居中的,而我们只需要建立一个新元素,给他加上inline-block属性 再把他高度设置为100%就行了,在下面的<img>设置vertical-align就生效了*/ .tiptop{
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
img{
  vertical-align:middle;
}
</style>

 

 

 

(2)第二种:flex布局(注意浏览器兼容性)

<div class="method2">   <img src="img_p1_title.png"> </div>   <style> .method2 {
  display: flex;
  justify-content: center;  //弹性盒子对象在主轴上的对齐方式   align-items: center;      //定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。   background-color:#00a0e9;
  height:200px;
}
.method2 img {
  width:20px;
  height:30px;
  background-color:#0A58A0;
}
</style>

 

 

 

 

(3)position:absolute;绝对定位方式

<div class="method3">   <span>第三种方法</span> </div>    <style> .method3 {
  width:100%;
  height: 200px;
  font-size: 18px;
  position: relative;
  background-color:#00a2d4;
}
.method3 span {
  width:100px;
  height:100px;
  background-color:#00ACED;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
</style>

 

 

 

(4)使用display:table-cell配合vertical-align:center(淘宝也是这样用的)

<div class="method4">   <span>第四种方法</span> </div>   <style> .method4 {
  width: 200px;
  height: 200px;
  vertical-align: middle;
  display: table-cell;  /*只支持IE8+及现代浏览器,与position:absolute;float:left;属性尽量不一起用*/   text-align: center;
  background-color:#00ACED;
}
.method4{
  width:100px;
  height:100px;
  background-color:#0A58A0;
}
</style>
标签:

旗下业务:筝悦坊 | 古筝网guzheng.wang | 晶彩印务
版权所有:上海家悠电子商务有限公司 E-mail:lu@9ewl.com
地址:上海市杨浦区政悦路88弄 沪ICP备14045517号

收起
展开