如何居中可變大小的圖像

Question

這應該很容易，我對此進行了一些研究。 我已經在這里，這里，這里和其他地方拼接了代碼，但是我無法使用它。

我有一個網頁，上面有3個.png。 前兩個是可變大小的，占頁面的100％。 頂部有一個洞（中間是透明的），中間用Javascript消失了，露出了底部。 前兩個.png和Javascript運行良好。

我希望底部圖像位於垂直和水平的確切中心，並且與頁面大小成比例。 我可以使它居中，或成比例，但不能同時出現。 我不能將底部圖片用作背景，因為這樣背景不是正確的顏色，或者是平鋪的。

這是一些代碼的示例：

HTML：

<body>  
        <div >
    <p0 id="face" ><img src="face2.png"; class='face'> </p0>
</div>
        <p1 id="circuit" > <img src= 'circuit.png' width = '100%' height = '100%' /> </p1>
        <p2 id="hole" ><img src="hole.png" width='100%' height = '100%' /> </p2>
</body>

CSS：

p0{ 
width: 50%;/*I can't set the height to 50% because it is a different size than the width*/
center
z-index:1;
position: absolute; 
}

p1{
z-index: 2;
width: 100%;
padding:0;
margin: 0;
height:100%;
position: absolute; 
}

p2{
z-index:3;
width: 100%;
padding:0;
margin: 0;
height:100%;
position: absolute; 
}

Answer 1

將您想要的所有內容集中到具有以下內容的div中：

   .div{
     width: 100%;
     position: relative; // or absolute
     text-align: center;
     text-align: -moz-center;
     text-align: -webkit-center;
     }

這是一個鏈接jsfiddle

這是完整的CSS：如問題所述，兩張圖片的大小在彼此精確的中心，

.parent{
 width: 100%;
 position:  absolute;
 text-aligh: -align: center;
 text-align: -moz-center;
 text-align: -webkit-center;

 }

.center1{

height:120px;
width: 275px;    
background-image: url("http://www.google.com/images/srpr/logo3w.png");
}

.center2{       
height: 100px;
width: 200px;
 background-image: url("http://www.google.com/logos/2012/turing-doodle-static.jpg");
}

HTML：

     <div class="parent" style="z-index: 1;">
         <div class="center1"></div> 
     </div>
     <div class="parent" style="z-index: 10;">
         <div class="center2"></div> 
     </div>

如何居中可變大小的圖像

問題描述

1 個解決方案

解決方案1
0 已采納 2012-06-24 21:39:28

如何居中可變大小的圖像

問題描述

1 個解決方案

解決方案1 0 已采納 2012-06-24 21:39:28

解決方案1
0 已采納 2012-06-24 21:39:28