CSS / Javascript - 如何将nextParticle图像放在屏幕的中心

问题描述 投票：0回答：1

我正在使用徽标图像上的粒子滑块效果进行codepen演示，我似乎根本不会对图像应用任何样式规则。我试图集中图像，此刻它卡在左边，我无法让它移动。我尝试了几个不同的角度，但没有。这是link

HTML

<body>  
        <img id="logo" class="next-particle"  data-init-position="random"
                  data-init-direction="left"
                  data-fade-position="left"
                  data-fade-direction="left"

                  data-particle-gap="1"

                 data-width="800"
                  data-height="600"

                  data-max-width="700"
                  data-max-height="500"



                  data-mouse-force="80"

                   data-gravity="0.06"

                   data-noise="20"

                 src="http://res.cloudinary.com/mrmw1974/image/upload/v1513726195/XBD1_dqjlw5.png">

</body>

CSS

body {
  position: relative;
}

#logo img {
 position: absolute;
  float: right;
}
javascript html css
1个回答
1
投票

将align ='center'添加到html标记

<html align='center'>
<head>
</head>
<style>
body {
  position: relative;
}

#logo img {
 position: absolute;
  float: right;
}
</style>
<body>  
        <img id="logo" class="next-particle"  data-init-position="random"
                  data-init-direction="left"
                  data-fade-position="left"
                  data-fade-direction="left"

                  data-particle-gap="1"

                 data-width="800"
                  data-height="600"

                  data-max-width="700"
                  data-max-height="500"



                  data-mouse-force="80"

                   data-gravity="0.06"

                   data-noise="20"

                 src="http://res.cloudinary.com/mrmw1974/image/upload/v1513726195/XBD1_dqjlw5.png">

</body>
</html>

enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.