图像边距不变。可能是因为我的 javascript？

Question

所以我的网站基本上显示了你的击球百分比 "thrown"（棒球）。如果百分比高于 60，我已将 JavaScript 设置为显示 gif。但是，图像似乎忽略了我为图像设置的 css 。有什么解决办法吗？

这是我的 HTML:

<!DOCTYPE html>
    <title>Javascript Time</title>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="testingJS.css">
        <script src="testingJS.js" type="text/javascript"></script>
    </head>
    <body>

        <h2>Javascript</h2>

        <p id="change">Strike Percent Counter</p>

        <p><input type="button" value="Ball" class="btn" onclick="throwBall()"></p>
        <p><input type="button" value ="Strike" class="btn" onclick="throwStrike()"></p>

        <p>Percent of Strikes:</p>
        <strong><p id="percent"></p></strong> 

        <img id="winner" src="">

    </body>
</html>

我的CSS:

p, H2{
    margin-bottom: -25px;
    font-size: 35px;
    color: white;
    text-align: center;
}

#percent{
    position: relative;
    margin: 20px auto auto auto;
    width: 25%;
    font-size: 55px;
    text-emphasis: 5px;
    border: 7px solid gold;
}

.btn{
    font-size: 29px;
    float: center;
}

#winner{
    margin: auto auto auto auto;
}

body{
    background-image: url("http://static.zoonar.com/img/www_repository3/db/3a/39/10_4baf1185c09f28bcbe957e13a0c34fca.jpg");
}

还有我的JavaScript：

var ball = 0;
var strike = 0;

function throwBall(){
    ball++;
    var percent = strike / (ball + strike);
    var round = percent.toFixed(2) * 100;
    document.getElementById("percent").innerHTML = round + "%";

    if (round <= 60){
        document.getElementById("winner").src = "";
    }
}

function throwStrike(){
    strike++;
    var percent = strike / (ball + strike);
    var round = percent.toFixed(2) * 100;
    document.getElementById("percent").innerHTML = round + "%";
     if (round > 60){
        document.getElementById("winner").src =     "https://media.giphy.com/media/NxA9Wmq8ISblK/giphy.gif";
    }
}

我这样做完全是为了练习我的技能，并且已经坚持了一段时间。提前致谢！

Answer 1

如果要在中间显示元素，设置width 属性适合宽度，display 属性设置block和margin:0 auto;

fiddle : https://jsfiddle.net/7vuzwx8z/

图像边距不变。可能是因为我的 javascript？

Image margin not changing. Possibly due to my javascript?

html

javascript

css

image

margin