想問, 如何能把圖片放於比它大的DIV正中間位? 下面是我的原碼, 只能做到圖在DIV橫的中間, 但卻一直在貼在DIV上方. 能用CSS修正嗎?
<div style="height:75px; width:75px;" align="center" >
<img src="thumbs/p001_thunb.JPG" width="50" height="37"/>
</div>
已邀請的邦友 {{ invite_list.length }}/5
那用text-align + vertical-align + line-height：
<pre class="c" name="code">
<style>
#box {
width: 640px;
height: 360px;
line-height: 360px;
border: solid 1px black;
text-align: center;
font-size: 0px;
}
#box img {
width: 320px;
height: 240px;
vertical-align: middle;
border: none;
}
</style>
<div id="box"><img src="IMAGE_00134.jpg"> </div>
可以參考這篇!!
依照圖片大小來調整參數~!
不成啊~ 它是把DIV放中間, 而我想要的是IMG在DIV的中間. 要的不一樣啊~
使用這個吧[img=http://www.w3schools.com/css/css_padding.asp]padding[/img]
<pre class="c" name="code">
<style>
.div{
height:75px;
width:75px;
background-color: #0000cc;
}
.img{
padding :19px 12.5px;
}
</style>
<div class="div">
<img class="img" src="20070394.jpg" width="50" height="37"/>
</div>
使用這個吧padding
簡單寫法如下，飛肯講得太複雜了，基本觀念就只有這樣
置中的方法，網路找應該可以看到3~5種，用邊界定位的只是其中一種而已
<pre class="c" name="code">
<style>
#box { height:高度; width:寬度;}
#box img{ margin: calc( 50% - 圖片高度 / 2) calc( 50% - 圖片寬度 / 2);
width:圖片寬; height:圖片高; }
</style>
<div id=box >
<img src="thumbs/p001_thunb.JPG"/>
</div>
iThome鐵人賽
看影片追技術