簡単なWebページに画像を配置する

私はHTMLとCSSの新機能です。私は私のWordpressのウェブサイトthinkprojekt.comにそれを挿入するページを作成しています。私は何をしようとしているのか達成できないのか、どこまで試してみましたか。簡単なWebページに画像を配置する

私がコード化したヘッダーがあり、その下には問題ありません。

p.h1{ 
padding-top:75px; 
padding-bottom: 25px; 
} 

a.header{ 
text-transform: uppercase; 
text-align: center; 
font-weight: normal; 
text-decoration: none; 
display:block; 
color: #000000; 
font-size:50px; 
font-family: 'Lato Light', sans-serif; 
line-height:50px; 
letter-spacing:15px; 
} 
</style> 

</head> 
<p class ="h1" align="center">&nbsp;<body><a class="header" href="http://thoughtprojekt.com">Thought Projekt</font></a>

は今、私は正確に中央に、右の「思想PROJEKT」の下に開始64px X 64px（30画像）を配置します。 1行に5つの画像しかなく、合計6行あります。私はパディングを試みましたが、画像にもハイパーリンクがあるので、クリック可能な空白が残ります。

画像を配置する方法を教えてもらえますか？私は何を示唆していることは、あなたがdiv要素、あなたが6のdivの一つの他、以下の各divの内、あなたが場所を配置することを、すべての画像が。Withingに行く全体のdivを作成する必要があるということです

おかげ

出典

2016-07-03 thought_projekt

幅の行に対して、divを使用して制限を設定することができます。そして、あなたは画像を入れフロートのためのアイテム、...

Example

HTML

<div class="row"> 
    <div class="image"><img src="#" alt="Image"/></div> 
</div>

CSS

.row { 
    max-width: 340px; 
} 

.image{ 
    width: 64px; 
    height: 64px; 
    float: left; 
}

出典

2016-07-03 11:05:28 flux

これは完全に機能しました。しかし、どのように効率的にイメージの全体を中央に持っていくことができますか？私は 'padding-left：300px;しかし、私はこれが最も適切な方法ではないと感じています。そこに何か提案がありますか？どうもありがとう。 –

私は 'margin-left：100px;'を使っています:) –

要素を中央揃えにするには、margin：autoまたはその他のCSSメソッドを使用できます。あなたがそれを正しく行うためのもっと多くの方法を知りたいのであれば、[このツール]（http://howtocenterincss.com/）をチェックして、_flexbox_ – flux

各画像は互いに隣り合っている。

HTMLコードは次のようになります。

<head> 
    <link type="text/css" rel="stylesheet" href="images.css"> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     </div> 
     <div class="row"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     </div> 
     <div class="row"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     </div> 
     <div class="row"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     </div> 
     <div class="row"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     </div> 
     <div class="row"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     <img src="your_image.png"> 
     </div> 
    </div> 
</body>

次にCSSのために：

//This is the images.css file located in the same folder with html file 
.container .row img{ 
    float: left; //Each image will be next ot each other 
    width: 64px; 
    height: 64px; 
} 

.row{ 
    display: block; 
    height: 64px; 
} 

.container{ 
    width: 320px; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    margin: auto 0px; 
    float: right; 
}

私はこれがあなたが求めているものであると信じています。それが役に立てば幸い！

PS：あなたは新しいstackoverflowですか？ようこそ！ :)

出典

2016-07-03 11:03:22 GeorGios

はい、私はゲオルギオスをStackOverflowのために新しい午前：）私はあなたの提案をしようとしています。 –

簡単なWebページに画像を配置する

答えて

関連する問題