CSS 图片设置左右上下居中方式

最新推荐文章于 2023-10-30 20:10:04 发布
最新推荐文章于 2023-10-30 20:10:04 发布
阅读量2k 收藏
点赞数 1
分类专栏： CSS －前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yiwugou/article/details/8555288
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> 
<html xmlns=" http://www.w3.org/1999/xhtml " xml:lang="cn" > 
<head> 
<title>未知大小图片在已知大小容器水平/垂直居中</title> 
<style type="text/css"> 
.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:200px;
height:200px;
border: 1px solid #EEE;
float:left;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
</style>
<body οnlοad="int()">
<div class="box">
<img src=" http://www.baidu.com/img/baidu_logo.gif "  />
</div>
<div class="box">
<img src=" http://bbs.blueidea.com/images/default/logo.gif "  />
</div>
<div class="box">
<img src=" http://www.baidu.com/img/baidu_logo.gif "  />
</div>
<div class="box">
<img src=" http://bbs.blueidea.com/images/default/logo.gif "  />
</div>
<div class="box">
<img src=" http://www.baidu.com/img/baidu_logo.gif "  />
</div>
<div class="box">
<img src=" http://bbs.blueidea.com/images/default/logo.gif "  />
</div>
<div class="box">
<img src=" http://www.baidu.com/img/baidu_logo.gif "  />
</div>
<div class="box">
<img src=" http://bbs.blueidea.com/images/default/logo.gif "  />
</div>
<div class="box">
<img src=" http://www.baidu.com/img/baidu_logo.gif "  />
</div>
<div class="box">
<img src=" http://bbs.blueidea.com/images/default/logo.gif "  />
</div>
<script language="javascript">
<!--
function int(){
 obj=document.getElementsByTagName("img");
 for(var i=0;i<obj.length;i++){
  imgnum=obj[i];
  size(imgnum);
 }
}
function size(_imgnum){
 w=parseInt(_imgnum.offsetWidth);
 h=parseInt(_imgnum.offsetHeight);
 s=w/h;
 if(w>200){
  w=200;
  h=200/s;
  _imgnum.style.width=w+"px";
  _imgnum.style.height=h+"px";
 }
 if(h>200){
  h=200;
  w=200*s;
  _imgnum.style.width=w+"px";
  _imgnum.style.height=h+"px"; 
 }  
}
//-->
</script>
</body>
</html>
yiwugou
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html图片上下居中的源代码,纯CSS实现元素的自适应上下居中
weixin_29499829的博客
06-04 912
在我们常用的布局中，经常会出现一个布局就是：居中，左右居中，并且上下居中。看到这里，您也许已经对每一种布局，都有自己的认识了，但是在上下居中的布局中，如何才能更好的实现上下的自适应布局呢？即，需要居中显示的元素高度是不定的，这里不讨论具体有哪些方案可以解决这个问题，但是可以给出一个纯CSS解决的方案。基本该解决方案的使用到的CSS3的属性flex和flex-flow，但是呢，我这里也不会细致的来对...
css实现图片上下左右居中
u011200562的博客
03-30 5616
一种常用的方式是把外层的 div 设置为 table-cell；然后让内部的元素上下左右居中。 CSS 代码如下： .content { width: 400px; height: 400px; border: 1px solid #ccc; text-align: center; display: table-cell; vertical-align: mid...
【CSS】设置元素左右居中
MoFe1的博客
05-10 302
style=" width: 95%; //设置容器宽度 margin-left: auto; margin-right: auto;"//设置容器左右居中
html图片上下居中的源代码,css水平、垂直居中的写法，请至少写出4种？
weixin_39917291的博客
06-04 338
方法一：利用定位(常用方法，比较推荐).parent{ width:500px, height:500px, border:1px solid #000, position:relative } .child{ width:100px, height:100px, border:1px solid #999, position: absolute; top: 50%, left: 50%; mar...
五种 css 让元素上下 左右 居中方法
文龙刚的博客
02-25 2948
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>元素上下左右居中</t.
图片垂直居中代码
diaosheng8387的博客
01-06 148
.img-outer { display: table; width: 100%; height: 100%; text-align: center; .img-inner { display: table-cell; vertical-align: middle; img { ...
css实现div内图片上下左右居中
09-25
DIV容器内设置 text-align:center 即可让图片居中，但是DIV内默认的图片是上对齐，不会上下居中，如果想要实现这样的效果，JS判断是比较麻烦的，因为DIV容器内的图片高度是不一定的，那么只有用table了，我想大多数...
用纯CSS实现容器内图片上下左右居中
09-25
要实现容器内图片上下左右居中，我们通常会使用CSS的text-align属性来实现水平居中，然而，单纯使用text-align并不能解决垂直居中的问题。在本例中，我们可以通过使用display属性和vertical-align属性来实现图片的...
DIV+CSS上下左右绝对居中
06-12
/* 上下居中 */ height: 100%; /* 如果需要在垂直方向上居中，确保容器有高度 */ } ``` 2. **使用 Grid**： CSS Grid 另一种强大的布局系统，可以方便地实现居中。设置容器为 `display: grid`，然后利用 `...
css 上下左右居中的几种方法
huang_rui_min的博客
05-30 6506
css几种实现元素上下左右居中的方法
图片垂直居中的代码的几种方法
03-27
图片垂直居中的css+div代码的几种方法编写
css布局小技巧之：让一个小图片水平靠右对齐，垂直居中
热门推荐
ytangdigl的博客
11-30 1万+
1、要实现的效果如下图： 2、css代码如下：<html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name=
设置图片元素上下垂直居中的7种css样式_赵一鸣博客
没做过产品的后端不是个好前端
11-09 4405
设置图片元素上下垂直居中的7种css样式 阅读(9548) @2018-07-15 14:13:34 图片、文字左右居中很简单，只需要以下代码： 1 text-align:center; 文字上下居中也很简单，假设外部div元素的高度是100px，那么： 1 line-height:100px; line-height不适用于图片...
css设置图片居中、居左、居右
weixin_34072159的博客
12-08 2391
  CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中、居左、居右 图片一般默认是居左显示的，如何更改它的水平位置呢？  &lt;div style="border:1px solid red;"&gt;图片居中展示&lt;/div&gt; &lt;img style="display:block; margin:0 ...
css里图片左靠近和右靠近,css设置图片居中、居左、居右
weixin_35599933的博客
08-03 872
bootstrap &plus; requireJS&plus; director&plus; knockout &plus; web API &equals; 一个时髦的单页程序也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性...
html图片如何摆在右侧,css里面，怎么让背景图片在最右边，且上下...
weixin_39611308的博客
05-30 9414
2016-07-08 00:39连亚玉 客户经理水平居中：1、单独文字垂直居中只需要设置CSS样式line-height属性即可。2、文字与图片同排，在设置div高度同时再对此css样式的图片“img”样式设置vertical-align:middle垂直居中属性，如.yangshi img{vertical-align:middle;} 。3 不确定宽度的块级元素设置水平居中的方法：(1)、是使...
html图片要上下居中显示,CSS图片垂直居中最简单的方法推荐
weixin_29585583的博客
06-04 555
使用CSS实现图片垂直居中，本文提供三种方法实现CSS图片居中，其中第一种加一个标签的方法是我推荐的，代码简洁，兼容性比较好，其他的hack可能会存在问题，不建议使用。如果你对图片实现居中有更好的方法，也请告知我们。详情请参考之前写过的一篇文章：CSS多行文字垂直居中的两种方法。HTML代码：CSS代码：.middle-box{height:300px; border: 1px solid #f0...
【CSS】实现div块上下左右居中对齐的5种方式
最新发布
weixin_45620943的博客
10-30 8837
以上2,4,5方式，注意浏览器版本，较老版本浏览器可能不兼容。
CSS 各种居中方式
weixin_30487701的博客
11-08 47
CSS里有很多种居中的方式，自己整理了一些常见的居中方式 水平居中 行内元素水平居中 给行内元素的父级加 text-align:center; .container{ text-align:center; } 已知块级元素的宽水平居中 设置左右marign的值为auto .container{ width:60...
css设置文字在图片内上下左右居中
04-10
可以使用CSS中的flex布局将文字和图片包裹在一个父容器中，通过align-items和justify-content属性来实现上下左右居中。例如： HTML代码： ``` 文字内容 ``` CSS代码： ``` .container { display: flex...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值