在屏幕上居中放置不同的图像

-1

就像你可以看到我有3个图像在屏幕上方。这3张图片在一个名为“knoppen_boven”的div中。在这些图像下面我有一个拼图图像。现在，我现在看到我的网站看起来像this。

就像你看到的拼图很好地在屏幕中间，但按钮不是。

这里是我的HTML

<div class="ui-grid-g-menu"> 
     <div class="knoppen_boven"> 
      <a href="~PROBE(248)~" class="btnKlant" data-transition="slide"> 
       <img src="images/btnklant.png" width="80" height="85" /> 
      </a> 
      <a href="~PROBE(249)~" class="btnContact" data-transition="slide"> 
       <img src="images/btnContact.png" width="80" height="85" /> 
      </a> 
      <a href="~PROBE(250)~" class="btnPlanning" data-transition="slide"> 
       <img src="images/btnPlanning.png" width="80" height="85" /> 
      </a> 
     </div> 
     <img src="images/img_puzzel.png" class="menu" width="150" height="150" /> 
    </div>

这里是我的CSS

.knoppen_boven{ 

    margin:50px auto; 
} 
.btnContact { 
    overflow: hidden; 
    position:absolute; 
    top: 110px; 
    left: 30px; 


} 
.btnKlant { 
    overflow: hidden; 
    position:absolute; 
    top: 110px; 
    left:125px; 

} 
.btnPlanning { 
    overflow: hidden; 
    position:absolute; 
    top:110px; 
    left:220px; 

} 
img.menu { 
    overflow: hidden; 
    display:block; 
    margin:90px auto;  
}

来源

2012-04-23 Steaphann

我想你overcomplating这一点。只需将text-align：center设置为knoppen_boven div，图像将居中在页面中（不需要绝对定位）。

.knoppen_boven { 
     text-align: center; 
}

记得删除所有绝对位置（在三个按钮中）以使文本编排工作。

来源

2012-04-23 11:48:18 salgiza

好的你是对的，总是让事情变得复杂！ – Steaphann 2012-04-23 11:55:01

我从顶级图像中删除了一些类。现在您可以相应地应用它们。

<style> 
.knoppen_boven{ 
align:center; 
height:100px; 

} 
.btnContact { 
overflow: hidden; 
position:absolute; 
top: 110px; 
left: 30px; 


} 
.btnKlant { 
overflow: hidden; 
position:absolute; 
} 
.btnPlanning { 
overflow: hidden; 
position:absolute; 

} 
img.menu { 
overflow: hidden; 
display:block; 


} 

</style>

和HTML是

<div class="ui-grid-g-menu" align="center"> 
<div class="knoppen_boven" > 
<a href="~PROBE(248)~" data-transition="slide"> 
<img src="images/btnklant.png" width="80" height="85" /> 
     </a> 
     <a href="~PROBE(249)~" data-transition="slide"> 
      <img src="images/btnContact.png" width="80" height="85" /> 
     </a> 
     <a href="~PROBE(250)~" data-transition="slide"> 
      <img src="images/btnPlanning.png" width="80" height="85" /> 
     </a> 
    </div> 
    <img src="images/img_puzzel.png" class="menu" width="150" height="150" /> 
</div>

希望这会帮助你。

来源

2012-04-23 11:51:50

在屏幕上居中放置不同的图像

回答

相关问题