CSS / Javascript-如何将nextParticle图像放置在屏幕中央

Question

I'm working on a codepen demo using a particle-slider effect on a logo image and I can't seem to apply any styling rules to the image at all. 我正在使用在徽标图像上使用粒子滑块效果的Codepen演示，而且似乎根本无法对图像应用任何样式规则。 I'm attempting to centralise the image, at the moment its stuck on the left and I can't get it to move. 我正在尝试将图像居中放置，此刻卡在左侧，无法移动。 I've tried a few different angles but nothing. 我尝试了几种不同的角度，但没有尝试。 This is the link 这是链接

HTML 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 CSS

body {
  position: relative;
}

#logo img {
 position: absolute;
  float: right;
}

Answer 1

Add align='center' to html tag 将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>

CSS / Javascript-如何将nextParticle图像放置在屏幕中央

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-12-19 23:55:26

CSS / Javascript-如何将nextParticle图像放置在屏幕中央

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-12-19 23:55:26

解决方案1
1 已采纳 2017-12-19 23:55:26