㈠ HTML问题:怎么让一个图片在div中垂直居中
第一种情况:知道图片的宽高和div的宽高;
<div style="width:300px;height:500px;">
<img src="1.jpg" style="float:left;width:200px;height:300px;margin:100px50px">
</div>
㈡ CSS图片垂直居中怎么设置
摘要 我们经常使用“margin: 0 auto”来实现水平居中,而我们一直认为“margin: auto”是不能实现垂直居中,但是实际上,我们仅需要添加一些限制便能实现我们的效果,就是通过定位:
㈢ css background-image 怎样让图片垂直居中
background:url(../images/arrow_u.png) no-repeat center center;
楼主试下
㈣ 如何让div中的图片垂直居中对齐
分两种情况:
1、图片宽高固定,这种情况很简单。
水平居中:就在图片的css中加 dispaly:block;margin:0 auto;
垂直居中:自己算出(div的高度-图片的高度)/2,得到margin-top值即可。
2、图片高度未知,这个布局比较难实现。一般我是用js做的。
水平居中:同上,在图片的css中加 dispaly:block;margin:0 auto;
垂直居中:用js算出(div的高度-图片的高度)/2,得到margin-top值赋给它。
㈤ 如何将html中图片文字垂直居中
文字垂直居中:
设置标签高度height,并且设置行高line-height值与height值一样。
也可以给父标签设置相对定位(position:relative),然后文字用一个行内标签(如span)包裹,并且给span设置绝对定位。
div垂直居中:
可以使用margin或padding来控制。比如margin:70% 0;(上下70%,左右0)
如果满意,望采纳,谢谢!如果不懂,可随时追问!
㈥ CSS如何实现让图片垂直居中
在一个容器里再定义一个绝对定位的p容器,再在p容器里放需要垂直居中的图片,图片定义相对定位的CSS。 直接上CSS代码:#pic{width:300px; height:300px; background-color:green; border:6pxsolid#ccc; text-align:center; position:relative; display:table-cell; vertical-align:middle;}#picp{*position:absolute;top:50%;left:50%;}#picpimg{*position:relative;top:-50%;left:-50%;}#pic是容器,里面放一个p容器,该容器采用绝对定位,最后插入图片,图片采用相对定位。 这里用到了一个hack,*只有IE浏览器可以识别,Firefox不认识
㈦ 怎样让图片在DIV中垂直居中
例子:<div
class="ac"
style="width:1000px;height:500px;position:relative;
z-index:9;">
<img
width="200px"
height="200px"
style="position:absolute;
top:150px;
left:400px;
z-index:9"
/>
</div>
这里的top和left需要数学天赋了,一般top=外div总高height/2+需要垂直居中内容总高height/2;left同理。
㈧ css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中
1、第一种css代码如图所示。display设置成table-cell,text-align为center,垂直居中设置vertical-align为middle。
㈨ div+css,图片怎么设置在DIV中垂直居中
div+css,图片设置在DIV中垂直居中:
方法一:
思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中。
结构如下:
<div>
<img src="images/tt.gif" width="150" height="100" />
</div>
CSS样式如下:
div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}
释义:
图片的尺寸为150x100px,DIV的大小为300x200px;
background-color:#CCC; border:#000 1px solid;为DIV加个边框和背景色,便于观察效果。
text-align:center,实现图片的水平居中;padding-top:50px,50px这个数值是经过计算得到的,padding-top的值具体算法如下:(DIV的高度 – 图片的高度)/2,但这里要注意,根据盒模型原理,我们还要将DIV原来的高度200减去padding-top的值,这样显示的才是正确的,否则DIV会变高。
方法二:
思路:只用padding属性,通过计算求得居中
结构代码同上;
CSS样式如下:
div {width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}
备注:这里DIV的宽高计算都遵循盒模型原理,计算方法同上。
方法三:
思路:
利用图片的margin属性将图片水平居中,利用DIV的padding属性将图片垂直居中。
结构代码同上;
CSS代码如下:
div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}
img {display:block; margin:0 auto;}
备注:
Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中;(有的设计师为图片再加个div标签,然后通过div标签的margin实现居中