簡體   English   中英

CSS / Javascript-如何將nextParticle圖像放置在屏幕中央

[英]CSS / Javascript - how to place a nextParticle image in the centre of a screen

我正在使用在徽標圖像上使用粒子滑塊效果的Codepen演示,而且似乎根本無法對圖像應用任何樣式規則。 我正在嘗試將圖像居中放置,此刻卡在左側,無法移動。 我嘗試了幾種不同的角度,但沒有嘗試。 這是鏈接

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

將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>

在此處輸入圖片說明

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM