bootstrap3の画像は中央に移動しません

ウェブサイトを作っていますので、画像をセンターや少し下に収めようとしていますが、それは起こりません。いつでも私はそれをここのコードに残しておきます。bootstrap3の画像は中央に移動しません

<img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail"> 
<img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail"> 
<img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail"> 



.image-thumbnail { 
    position: absolute; 
    top: 80%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
    background-color: #3B393E; 
}

私は間違っていることを理解していません。 divの中

出典

2017-01-04 Kieran Keita Herr

ラップ当時と仕事をするtext-align:centerを使用します。

.image-thumbnail{transform:translateX(-50%) translateY(-50%); background-color: #3B393E;} 
 

 
.myclass { 
 
    width: 100%; 
 
    text-align: center; 
 
}

<div class="myclass"> 
 

 
    <img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail"> 
 
     <img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail"> 
 
     <img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail"> 
 
    
 
</div>

出典

2017-01-04 02:37:21 Yaser

は、問題がであるブートストラップ

<div class="center"> 

    <img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail"> 
     <img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail"> 
     <img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail"> 

</div>

出典

2017-01-04 02:44:16 Iman

上で構築する中央クラスを追加セレクタを使用します。クラス名がimg-thumbnailであり、使用するファイルがimage-thumbnailの場合、クラス名のセレクタのスペルが間違っているため、選択したい要素のターゲットを指定できませんでした。さらに、垂直にセンタリングする場合は、上部の位置を50％にする必要があります。

.img-thumbnail{position: absolute;top: 50%;left: 50%;transform:translateX(-50%) translateY(-50%); background-color: #3B393E;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail"> 
 
     <img src="http://i2.wp.com/ajournalofmusicalthings 
 
</body>

出典

2017-01-04 02:49:30

bootstrap3の画像は中央に移動しません

答えて

関連する問題