Question

我需要使用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;
}

我需要像按钮一样的东西＆＃34;下载Whataspp＆＃34;在这里 http://www.whatsapp.com/

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

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

Answer 4

像这样创建定位

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

指出宽度，＆＃39;导致看到它需要多少/大约/大小; ...这样更容易理解margin-left; 还可以添加一些负余量顶部 http://jsfiddle.net/3j5w5v7f/7/

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

4 个答案: