围绕按钮图像与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

回答

相关问题