CSS div 图片居中

<style>.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:600px;
height:600px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}</style>

<div class="box">
  <a>

    <img src="images/logo.jpg" style="width:300px;height:200px;vertical-align:middle;"/>

  </a>
</div>

时间: 2024-12-24 20:38:45

CSS div 图片居中的相关文章

HTML5:footer定位(底部+居中)的探讨+div图片居中问题

初学HTML+CSS布局,尝试自己写一个百度首页,但是footer的定位遇到麻烦并且百度没有好的解决方法,在此记录下逐步的过程.记录之,备忘. 初学,解决方法难免出现不妥之处,也请看到这篇文章的前辈指点一二,在此先谢过. 首先是设置为 footer{     clear: both;     display: block; position: absolute; bottom: 100px; } 时效果为:确实绝对定位到了底部,但是由于是绝对定位,使用 footer{     clear: bo

通过纯css实现图片居中的多种实现方式

html结构: 1 <div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd"> 2 <img src="default.jpg" width="400" height="300"/> 3 </div> 实现img位于外层div的居中显示,网上有很多在img外层嵌各式各样的span

css设置图片居中、居左、居右

CreateTime--2017年12月8日14:25:09 Author:Marydon 图片一般默认是居左显示的,如何更改它的水平位置呢? <div style="border:1px solid red;">图片居中展示</div> <img style="display:block; margin:0 auto;" src="http://files.cnblogs.com/files/Marydon20170307/

关于HTML+CSS设置图片居中的方法

有的时候我们会遇到这样一个问题,就是当我们按下F12进行使用firebug调试的时候,我们发现图像没有居中,页面底下有横向的滑动条出现,图片没能够居中,默认状态下只是紧靠在页面最左侧,而我们对图像缩小的时候,图像依然紧靠在页面最左侧,所有我们需要对图像设置居中,无论放大或者缩小页面,都使得图像至始至终都显示在页面的中间. 代码如下 HTML: <html> <head> </head> <body> <div class="backgroun

css div上下左右居中

相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设  content 要在f里上下左右居中 <div class="f"><div class="content"></div></div> <style> .f{ width: 800px; height: 800px; position:relative; } .content

&lt;转载&gt;使CSS文字图片div元素居中方法之水平居中的几个方法

文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法呢比较简单.直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了. 2 确定宽度的块级元素水平居中怎么设置呢?设置方法也

DIV+CSS中让布局居中_背景图片居中_文字内容居中

DIV+CSS中让布局居中_背景图片居中_文字内容居中

DIV+CSS 图文混排的图片居中办法

不少人为了让 Div 图文混排的图片可以居中,给 IMG 套各式各样的 SPAN.DIV.LI 等等,以便于使用 text-align来进行居中. 1 <div>图文混排 2 <br> 3 <span style="text-align:center"><img src="http://www.baidu.com/img/baidu_jgylogo3.gif"></span> 4 </div>

Js配合CSS实现的图片居中

CSS图上居中很好实现,但万恶的浏览器之间各不相让,搞的不兼容,还好我们有让其兼容的办法,那就是结合JS来实现,这样各个浏览器都听话多了.本例就是CSS结合JavaScript实现的图片垂直.水平方向都居中,也不是上下左右居中,位于网页的正中央,代码如下: <body onresize="myLoad()" > <div id="xuanma" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolut