圍繞按鈕圖像與CSS

我需要使用CSS居中的圖像內的按鈕，但我不能夠相對於中間的按鈕圖像圍繞按鈕圖像與CSS

這裏的左上角是頁面

HTML文件：

<div class="content"> 
    <img class="mainImage" src="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg" alt="logo"> 

    <div id="startButton"> 
      <button onclick="hide()" width="40px">Start Now</button> 
    </div> 
</div>

CSS：

.content{ 
    position: relative; 
} 

img.mainImage{ 
    position: relative; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 50px; 
    width: auto; 
    height: auto; 
    max-width: 400px; 
    max-height: 500px; 
    visibility: visible; 
    z-index: 1; 
} 
#startButton{ 
    position: absolute; 
    margin-left: auto; 
    margin-right: auto; 
    top: 0px; 
    left: 0px; 
    z-index: 2; 
} 

body{ 
    background-image: url('http://www.psdgraphics.com/file/colorful-triangles-background.jpg'); 
    margin: 0; 
    padding: 0; 
}

我需要的東西，它如同按鈕 http://www.whatsapp.com/

「下載Whataspp」在這裏我需要就像一個當你一個按鈕重新調整窗口大小，即它不具有相對移動其背景圖像

來源

2014-11-03 davide l

http://jsfiddle.net/3j5w5v7f/2/ ..這是你在找什麼？ ..或讓我知道你想要按鈕的位置是 – 2014-11-03 21:58:21

如果你想使用座標來居中它，那麼它就不是你需要的東西http://jsfiddle.net/3j5w5v7f/5/ – waplet 2014-11-03 22:01:09

你能澄清嗎？你想讓開始按鈕相對於#mainImage定位嗎？ – hungerstar 2014-11-03 22:01:36

這裏是更新的jsfiddle根據你提供了什麼：http://jsfiddle.net/3j5w5v7f/8/

我添加一個div申報寬度（匹配圖像）和定心DIV（認爲它作爲一個容器）。然後，按鈕本身會獲得絕對正確的左/頂部位置，以將其調整到您想要的位置。

CSS：

#button-center { 
    z-index: 2; 
position: absolute; 
top: -101px; 
left: 0px; 
} 

#startButton { 
    position: relative; 
    width: 200px; 
    margin: 0 auto; 
    text-align: center; 
}

HTML：

<div id="startButton"> 
    <div id="button-center"> 
    <button onclick="hide()" width="40px">Start Now</button> 
    </div> 
</div>

來源

2014-11-03 21:58:52 chdltest

你的問題不是很清楚，我的解讀是，「我怎麼能完全集中在圖像的頂部的按鈕。」在這種情況下，你會想給包含元素relative定位，然後設置按鈕負頂部和左側邊緣的按鈕的寬度/高度的一半，這樣的：

#mainImage { 
    position:relative; 
} 
#startButton{ 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin-left:-33px; 
    margin-top:-9px; 
    z-index: 2; 
}

Updated Fiddle

來源

2014-11-03 22:00:54 APAD1

換一種包裝DIV圍繞圖像都和按鈕http://jsfiddle.net/3j5w5v7f/

HTML

<div class="content"> 
    <div id="imageButtonWrapper"> 
      <div id="mainImage"> 
       <img class="mainImage" src="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg" alt="logo"> 
      </div> 
      <div id="startButton"> 
       <button onclick="hide()" width="40px">Start Now</button> 

      </div> 
     </div> 
    </div>

CSS

#mainLogo{ 
    position: relative; 
    left: 0px; 
    top: 0px; 
} 

.content{ 
    position: relative; 
} 

#imageButtonWrapper{ 
    position: relative; 
    display: block; 
    margin-left: auto; 
     margin-right: auto; 
    margin-top: 50px; 
    width: auto; 
    height: auto; 
    max-width: 400px; 
    max-height: 500px; 
    visibility: visible; 
    z-index: 1; 
} 
#startButton{ 
    position: absolute; 
    left: 65px; 
    top: 110px; 
} 

body{ 
    background-image: url('http://www.psdgraphics.com/file/colorful-triangles-background.jpg'); 
    margin: 0; 
     padding: 0; 
}

來源

2014-11-03 22:01:25 jk3455

爲什麼不使用'.content'作爲包裝div？ – hungerstar 2014-11-03 22:02:17

我以爲他們可能有更多的內容不只是圖像和按鈕 – jk3455 2014-11-03 22:05:35

非常真實，好點。 – hungerstar 2014-11-03 22:11:39

創建定位這樣

#startButton{ 
    position: absolute; 
    top:50%; // middle 
    left:50%; // center 
    margin-left:-40px; // half of width of button 
    z-index: 2; 
    width:80px; 
}

寬指出，「原因，看看有多少/約/尺寸需要; ......所以更容易理解保證金左; 也可以添加一些負邊界頂部 http://jsfiddle.net/3j5w5v7f/7/

來源

2014-11-03 22:03:39 waplet

圍繞按鈕圖像與CSS

回答

相關問題