div 以及其内部的img垂直居中

最新推荐文章于 2022-02-14 16:24:05 发布
最新推荐文章于 2022-02-14 16:24:05 发布
阅读量632 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzc2677/article/details/16870337
版权

css

.photo {
	position: absolute;
	top: 50%;
	margin-top: -400px;
	width: 100%; 
	height: 600px; 
	line-height: 600px; 
	text-align: center; 
}

.photo img {
	vertical-align: middle;
	position: static;
	top: -50%;
	left: -50%;
}

Html 

<div class="photo">
	<img src="http://farm9.staticflickr.com/8247/8636688005_2d7609f253.jpg"/>
</div>


番茄爱上了西红柿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于div中img,span垂直居中的问题
09-28
下面小编就为大家带来一篇关于div中img,span垂直居中的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element-ui中多选框批量导出
mslmhl的博客
09-29 483
首先看代码：
实现div里的img图片水平垂直居中
热门推荐
DreamFJ的博客
03-31 22万+
body结构<body> <div> <img src="1.jpg" alt="haha"> </div> </body>方法一： 将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。<style type="text/css"> *{
div中的内容-图片img垂直居中的五种方法
Java技术
10-25 6569
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：p { height:30px; line-height:30px; width:100px; overflow:hidden; }二、内边距（padding）法 和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如
简单方便实现img在div内垂直居中
6块腹肌的博客
02-19 8902
想要将img在div内实现垂直居中的话可以使用display：table-cell；+  vertical-align：middle；就可以了。如果使用父元素行高的话，实现的垂直居中会导致img的底部在容器的中线上而已，如下： 正确的做法如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;img垂直居中&lt...
把img放在div里面
qq_66832218的博客
02-14 1380
需要将img设置成block 否则img会比包含他的div要小
JS+CSS设置img在DIV中只显示Img垂直居中的部分
10-26
img的宽和Div相同，但高不固定，要求只显示Img垂直居中的部分，下面有个不错的示例，感兴趣的朋友可以参考下
解决img在div中居中的问题
09-24
下面小编就为大家带来一篇解决img在div中居中的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
div图片垂直居中 如何使div中图片垂直居中
09-25
关于图片垂直居中的话题想必大家在论坛或者是百度搜索列表中看到了不少了吧，烦人的是没有具体或者相当详细的解决方法，希望本文所整理的知识点可以帮助到你
图片垂直居中css写法兼容ie6
01-21
图片垂直居中，原理应该就是，其实我也不知道。 手上两种方法，异曲同工，但是都兼容ie6的。 复制代码代码如下: <div class=”imgBox”> <mg> <></i> </div> .imgBox{ width:100%;height:400px; border:1px ...
div中的img垂直居中显示
wangchaohpu的博客
11-24 2220
转自：https://www.thinkcss.com/jiqiao/1492.shtml 下面只列出了方法3，其他方法见上面的链接 3、用绝对定位实现垂直居中（推荐-兼容性好） 解释： 1、一张包裹在div中的img图片，给图片以及div元素定义了尺寸。 2、给img的父元素添加相对定位属性（position: relative），同时，要给子元素也就是图片img元素添加绝对定位属性（...
img在div中垂直居中的方法
sinat_38992528的博客
10-26 7323
html中 <div> <img src="" /> </div> 方法： 1.将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。 <style type="text/css"> *{margin: 0;padding: 0;} div{ width:150px; height: 100px; display: table-cell; ve
div里面放img
weixin_30251829的博客
05-18 1427
div里面放img的时候 会出现包裹不住的情况，这个时候 只要将img { width:100%,height:100% },就可以解决问题了 转载于:https://www.cnblogs.com/agansj/p/6873656.html
图片
天才小镇刷题家的博客
11-15 122
CSDN自带：图片大小左右位置调整
div里的img图片水平垂直居中（解决）
孟林洁的博客
07-20 3万+
转记！ 实现div里的img图片水平垂直居中
div里面的图片垂直居中的方法
qq_26522773的博客
03-05 3764
body结构 &lt;body&gt; &lt;div&gt; &lt;img src="1.jpg" alt="haha"&gt; &lt;/div&gt; &lt;/body&gt; 现在主流是移动端，那方法五最常用，因此我将它前置 方法：弹性布局flex &lt;style type="text/css"&gt; *{m
div中内容和img垂直居中方法
u010271693的专栏
08-15 231
[code="html"] .box{ width:300px; height:300px; text-align:center; position:relative; overflow:hidden; display:table-cell; vertical-align:middle; } .box .mid{ ...
实现DIV内img图片水平垂直居中的方法
CX的博客
06-02 5384
如何实现DIV内的img图片水平垂直居中的方法？ 方法一：运用flex 对父元素<div class="main">进行css样式设置： { display:flex; justify-content: center; align-items: center; } 方法二：vertical-align <img>是行内元素，line-height设置的是块级元素...
div内部中 img和span元素两行垂直居中
最新发布
07-16
要使div内部的img和span元素两行垂直居中，可以使用以下方法： 1. 使用Flexbox布局： 可以为div容器添加display: flex;属性，然后使用align-items: center;属性使内部元素在主轴方向上垂直居中，并使用justify-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值