iT邦幫忙

0

HTML中DIV同IMG問題

想問, 如何能把圖片放於比它大的DIV正中間位? 下面是我的原碼, 只能做到圖在DIV橫的中間, 但卻一直在貼在DIV上方. 能用CSS修正嗎?

<div style="height:75px; width:75px;" align="center"  >
<img src="thumbs/p001_thunb.JPG" width="50" height="37"/>
</div>
2
fillano
iT邦超人 1 級 ‧ 2016-03-02 17:25:26
最佳解答

那用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>
2
老鷹(eagle)
iT邦高手 1 級 ‧ 2016-03-01 14:55:38

可以參考這篇!!
依照圖片大小來調整參數~!

perry168 iT邦新手 3 級 ‧ 2016-03-02 13:32:19 檢舉

不成啊~ 它是把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

0
窮嘶發發發
iT邦高手 1 級 ‧ 2016-03-02 09:51:36

簡單寫法如下,飛肯講得太複雜了,基本觀念就只有這樣
置中的方法,網路找應該可以看到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>
perry168 iT邦新手 3 級 ‧ 2016-03-02 13:27:09 檢舉

奇怪, 兩個方法都不成~

目前DIV 有沒有被包住,如果有他的屬性有沒有往下繼承,這一點也是要考量的
CSS 的語法寫法百百種,每個人做法都不太一樣的

我要發表回答

立即登入回答