2016-03-29 10 views
-1

これらのアイコンの種類のメニューを編集する必要があります。アイコン画像をタイトルの下に整列する

私はそれらをページの中央に配置する必要があり、モバイルでも見栄えがよいです。ここで

は私のサンプルコードです:

<div style="margin-left: 0 auto;"> 

    <div style="margin:0 auto;"> <a href="http://kutsalkitap.org/category/tartisma/"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Blog-Icon.png" alt="tartisma-blog" width="128" height="128" /><br />Tartışma <br />Blog</a></div> 

    <div style="margin:0 auto;"><a href="http://kutsalkitap.org/kaynaklar/"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Gift-Icon.png" alt="hediyeler-kaynaklar" width="128" height="128" /><br />Hediyeler <br />ve Kaynaklar</a></div> 

    <div style="margin:0 auto;"><a href="http://kutsalkitap.org/kilise-adresleri/"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Chapel-Icon.png" alt="kilise-bul" width="128" height="128" /><br />Kilise <br />Adresleri</a></div> 

    <div style="margin:0 auto;"><a href="http://kutsalkitap.org/online-kutsal-kitap/"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Bible-Icon.png" alt="online-kutsal-kitap" width="128" height="128"/><br />Online <br />Kutsal Kitap</a></div> 

</div> 

、ここではフィドルです:https://jsfiddle.net/yjwo2eqa/

誰かが私を助けることができますか?

おかげdiv修正それを最も先頭にtext-align: center;を与える

答えて

2

<div style="margin-left: 0 auto; text-align: center;"> 

プレビュー

フィドル:https://jsfiddle.net/h3ckLfx1/

+0

こんにちはPraveenさんのおかげを追加する必要はありません。私はそれらをモバイルではこのように見せることができますが、デスクトップではサイドバイサイドですか? – Burcak

+0

@Burcak '@ media'クエリを使います。チックボタンをクリックして回答を受け入れますか? –

0
<div style="text-align:center"> 

    <div style="margin:0 auto;"> <a href="http://kutsalkitap.org/category/tartisma/"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Blog-Icon.png" alt="tartisma-blog" width="128" height="128" /><br />Tartışma <br />Blog</a></div> 

    <div style="margin:0 auto;"><a href="http://kutsalkitap.org/kaynaklar/"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Gift-Icon.png" alt="hediyeler-kaynaklar" width="128" height="128" /><br />Hediyeler <br />ve Kaynaklar</a></div> 

    <div style="margin:0 auto;"><a href="http://kutsalkitap.org/kilise-adresleri/"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Chapel-Icon.png" alt="kilise-bul" width="128" height="128" /><br />Kilise <br />Adresleri</a></div> 

    <div style="margin:0 auto;"><a href="http://kutsalkitap.org/online-kutsal-kitap/"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Bible-Icon.png" alt="online-kutsal-kitap" width="128" height="128"/><br />Online <br />Kutsal Kitap</a></div> 

</div> 

margin-leftはあなたが助けるためにだけ、text-align:center

+0

ガウラフ、助けてくれてありがとう。私はそれらをモバイルではこのように見せることができますが、デスクトップではサイドバイサイドですか? – Burcak

+0

@mediaのクエリは、モバイルで処理するCSSにあります。 '@media(max-width:767px){//ここにあなたのコード}' 767px以下の幅は、一般的にモバイルとタブレット用です。あなたはモバイルでルックスをカスタマイズするためにここにCSSを書くことができます –

関連する問題