使用CSS使图像中的按钮居中

Question

我需要使用CSS居中一个图像内的按钮，但我不能居中的按钮相对于图像的左上角

这是页面

http://jsfiddle.net/3j5w5v7f/

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/上的按钮"Download Whataspp“的东西

我需要一个按钮，它的行为像一个当你重新调整窗口大小，即它不会移动相对于其背景图像

Answer 1

下面是基于您提供的内容的更新后的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>

Answer 2

您的问题不是很清楚，我将其解释为“我如何才能将按钮绝对居中放置在图像的顶部。”在这种情况下，您需要为包含元素提供relative定位，然后将按钮上的负上边距和左边距设置为按钮宽度/高度的一半，如下所示：

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

Updated Fiddle

Answer 3

在图像和按钮http://jsfiddle.net/3j5w5v7f/周围放入另一个包装器DIV

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;
}