Question

我需要一个页面，中间居中有一个图像，里面有按钮。我无法实现的是在重新调整浏览器窗口大小时强制按钮保持在相同位置。这是页面： http://jsfiddle.net/afg5wrLz/

HTML代码：

<div id="MyImage">
    <img id="theImage" src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg">
    <button id="myButton">Start Here</button>
</div>

CSS：

#MyImage{
    position: relative;
}

#theImage{
   position: relative;
   margin-left: auto;
   margin-right: auto;
   margin-top: 20px;
   display: block;    
   width: auto;
   height: auto;
   max-width: 400px;
}
#myButton{
   position: absolute;
   left: 0px;
   top: 0px;
}

现在，如果您重新调整窗口大小，您将看到问题;按钮的左侧坐标与窗口有关，而与图像无关，因此当您重新调整窗口大小时，按钮会移动，同时我希望它保持在图像中的相同位置。要更好地了解我需要前往http://www.whatsapp.com/并查看Download WhatsApp按钮的行为或文本“Simple.Personal ...”，如果您重新调整窗口大小，您将看到它们保留在相对于其背景图像的相同位置随着宽度的变化保持在屏幕的中心。我想知道我需要在代码中更改以实现该结果

Answer 1

将其他div上的按钮居中

function getVertices() {
    $.ajax({
        method: "GET",
        url: "graph/vertices"
    }).done(function(data) {
        return data;
    });
}

Answer 2

这是一个居中的图像，其中有一个按钮位于图像http://jsfiddle.net/afg5wrLz/2/

之后

HTML

<div id="MyImage">
    <img id="theImage" src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" />
    <button id="myButton">Start Here</button>
</div>

CSS

#MyImage {
    position: relative;
    margin: 20px auto 0;
    width: 100%;
    max-width: 400px;
}
#theImage {
    display: block;
    position: relative;
    width: 100%;
}
#myButton {
    position: absolute;
    left: 0px;
    top: 0px;
}

Answer 3

这种结构有效。检查这是否可以接受

html

    <div id="MyImage">
        <img id="theImage" src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" />
        <button id="myButton">Start Here</button>
    </div>

和相应的css

#MyImage {
    position: relative;
    width:400px;
    margin:0 auto; /*this will center your button and image as mentioned by @BojanPetkovski in the comment*/
}
#theImage {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    display: block;
    width: auto;
    height: auto;
    width: 400px;
}
#myButton {
    position: absolute;
    left: 0px;
    top: 0px;
}

Answer 4

您只需要为width div分配一个固定的#MyImage，以便复制您在Whatsapp网站上看到的内容。这是我通过width 1000px #MyImage为#MyImage{ width: 1000px; } div创建的 jsFiddle demo 。

CSS：

{{1}}

您可以缩小结果窗口的宽度，并看到该按钮保留在原位。

Answer 5

如果您需要将开始按钮作为图像的中心，请检查此代码

       <div id="MyImage">

         <img id="theImage" src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize   /PIA17011_ip.jpg">
        <button id="myButton">Start Here</button>

        </div>

        #MyImage{
             position: absolute;   
               }

      #theImage{
            position: relative;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            display: block;    
            width: auto;
            height: auto;
            max-width: 400px;
             }

          #myButton{
               position: absolute;
               left:150px;
               z-index:1;
               top:200px;
              }

相对于图像CSS居中按钮

5 个答案: