2016-12-03 11 views
1

私はコードを持っていると私はどのように同じ行のすべての左と右のいずれかのセンターを3つの画像を追加したい私はこれまでのところ、私の画像が中央に行くが、他の2つは最初の画像の下に行くあなたはdiv要素の中にそれぞれの画像を持って私は中央の画像をしようとすると、側に2つの画像は、PHPやHTMLファイル

<div style="text-align: center;"><IMG SRC="steven.png" ALT="image"></div> 
<div style="float: left;"><IMG SRC="star.jpg"></div> 
<div style="float: right;"><IMG SRC="star.jpg"></div> 



<a href="log.php"> LOGIN </a> 

答えて

0

は、それぞれのdivが100%を占めるになり、私が得たもの、私のコーディングのIA PHPでそれを行いますあなたのイメージが中心に置くことができるにもかかわらずdivの(デフォルトの位置の下で)常に他の下に置かれます。

1)あなたは彼らがそれに応じてそれらをフロートたい幅でそれぞれのdivのスタイル:

それらをラインアップする多くの方法が、ここで、あるが気になるものもあります。
2)divsの幅を設定し、その位置を相対値に設定し、それをあなたの好みに合わせるために使用します。
3)LIの内側にULの内側に入れ、ディスプレイのインラインブロックを使用します。

0

ここでは、最初の画像が左に揃えられ、2番目が中間に、3番目が右に揃えられた行に3つの画像を表示する方法の1つです。

<div> 
    <div style="margin: auto; float: left; width: 33%;"> 
     <img src="https://cdn.kastatic.org/images/avatars/leaf-red.png" /> 
    </div> 
    <div style="margin: auto; float: left; width: 34%; text-align: center;"> 
     <img src="https://cdn.kastatic.org/images/avatars/leaf-green.png" /> 
    </div> 
    <div style="margin: auto; float: left; width: 33%;"> 
     <img style="float: right;" src="https://cdn.kastatic.org/images/avatars/leaf-blue.png" /> 
    </div> 
</div> 

working example

0

はちょうどこのスニペットを使用して実行を参照してくださいあなたはボックスが正しく

.box { 
 
\t text-align:center; 
 
\t width:100%; 
 
\t float:left; 
 
} 
 
.left { 
 
\t width:100px; 
 
\t height:100px; 
 
\t display:inline-block; 
 
\t text-align:left; 
 
\t background:#333; 
 
\t float:left; 
 
} 
 
.center { 
 
\t width:100px; 
 
\t height:100px; 
 
\t background:#999; 
 
\t display:inline-block; 
 
\t text-align:center; 
 
} 
 
.right { 
 
\t width:100px; 
 
\t height:100px; 
 
\t display:inline-block; 
 
\t text-align:right; 
 
\t float:right; 
 
\t background:#903; 
 
}
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 
</head> 
 

 
<body> 
 

 
<div class="box"> 
 
    <div class="left"></div> 
 
    <div class="center"></div> 
 
    <div class="right"></div> 
 
</div><!-- /.box --> 
 

 
</body> 
 
</html>

+0

整列見ることができますこれはあなたのために働いていますか? –

関連する問題