イメージ中心

私は、画面のすべてのサイズでイメージを中央にしたいと思うウェブサイトをコーディングしています。イメージ中心

は、私が試した： -

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title></title> 
 
    <script type="text/javascript" language="javascript"> 
 
     window.onload = function() { 
 
      var rotator = document.getElementById("rotator"); 
 
      var images = rotator.getElementsByTagName("img"); 
 
      for (var i = 1; i < images.length; i++) { 
 
       images[i].style.display = "none"; 
 
      } 
 
      var counter = 1; 
 
      setInterval(function() { 
 
       for (var i = 0; i < images.length; i++) { 
 
        images[i].style.display = "none"; 
 
       } 
 
       images[counter].style.display = "block"; 
 
       counter++; 
 
       if (counter == images.length) { 
 
        counter = 0; 
 
       } 
 
      }, 1000); 
 
     }; 
 
    </script> 
 
\t <style> 
 
\t .pg{ 
 
    top: 50%; 
 
    left: 50%; 
 
    position: absolute; 
 
\t } 
 
\t img 
 
{ 
 
    display:block; 
 
    margin:auto; 
 
} 
 
\t </style> 
 
</head> 
 
<body> 
 
    <form id="form1"> 
 
    <div class="pg" id="rotator"> 
 
     <img alt="" src="img/logo.png" /> 
 
     <img alt="" src="img/aip.png" /> 
 
    </div> 
 
    </form> 
 
</body> 
 
</html>

上記のコードは私に成功を与えることができませんでした。

私を助けてください！

同じコードを共有してください。

私は自分のコードで画像の中心を合わせることができませんので、私を助けてください。

CSSは次のとおりです。 -

<style> 
    .pg{ 
    top: 50%; 
    left: 50%; 
    position: absolute; 
    } 
    img 
{ 
    display:block; 
    margin:auto; 
} 
    </style>

出典

2017-06-06 Anonymous

たぶん、[この]（https://css-tricks.com/centering-css-complete-guide/）が役立ちます。 –

位置を追加してみてください：pgクラスのためのあなたのCSSスタイルで絶対。 – SAJ

imgにCSSを適用する必要があります。次のCSSを使用してください： –

は、すべての画像が中央揃えている

img 
    { 
     display:block; 
     margin:auto; 
     max-width:100%; 
    }

このコードを試してみてください。

出典

2017-06-06 11:00:16

しかし、ブラウザのサイズを変更すると、ここで参考になる –

参照リンク... https://codepen.io/chandrashekhar/pen/MowYVp –

動画で試してみてください。 –

text-align: center;~pgクラスを追加し、imgタグにmargin: 0 auto;を追加します。

.pg { 
    text-align: center; 
} 

.pg img{ 
    margin: 0 auto; 
}

Here is a fiddle.

出典

2017-06-06 11:15:33 Boky

あなたは水平方向と垂直方向の中心は、この試す表示したい場合：私はそれをより分かりやすくするために、高さ、幅、および境界線を入れているを。異なる画面サイズの場合、メディアクエリを使用してイメージの幅を指定する必要があります。

window.onload = function() { 
 
      var rotator = document.getElementById("rotator"); 
 
      var images = rotator.getElementsByTagName("img"); 
 
      for (var i = 1; i < images.length; i++) { 
 
       images[i].style.display = "none"; 
 
      } 
 
      var counter = 1; 
 
      setInterval(function() { 
 
       for (var i = 0; i < images.length; i++) { 
 
        images[i].style.display = "none"; 
 
       } 
 
       images[counter].style.display = "block"; 
 
       counter++; 
 
       if (counter == images.length) { 
 
        counter = 0; 
 
       } 
 
      }, 1000); 
 
     };

.pg { 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
    height:200px; 
 
    border: 1px solid red; 
 
    
 
} 
 
img { 
 
     width:80px; 
 
    }

<form id="form1"> 
 
    <div class="pg" id="rotator"> 
 
     <div class="img" id="rotator"> 
 
     <img alt="" src="https://i.stack.imgur.com/pBxRp.png" /> 
 
     <img alt="" src="https://i.stack.imgur.com/5GIJP.png" /> 
 
     </div> 
 
    </div> 
 
    </form>

出典

2017-06-06 11:30:57

これはどこかで私を助けました。ページ全体の一部ではありません。 –

いいえ、画像と同じ幅がすでにあります。 –

高さを取り除き、.pgで枠を取り除き、imgの幅を取り除きます –

答えて

関連する問題