2016-05-02 11 views
0

私のウェブページを見ると、画像は整列していません。私はアイコンが真っ直ぐに整列されたいが、それは他の細胞に依存のように見える違いがあり、時間を記述するための容器であるかに応じて、大: enter image description here私の画像をCSSと整列する

私は問題のためfiddleを作成しました。手伝って頂けますか?不正なコードは、CSSのようだ:

#list_item_thumbs .item { 
    list-style: none; 
    margin: 0; 
    display: block; 
    clear: both; 
    overflow: visible; 
    border-bottom: 1px solid #ccc; 
    position: relative; 
    padding: 8px 0 0 0; 
    height: 88px; 
} 

答えて

1

は、あなたのイメージにこれを追加します。

#list_item_thumbs .item_img img { 
    display: block; 
    margin: 0 auto; 
} 

を、私はさらに、アライメントを助けるために.item_ageクラスにこれを追加します。

#list_item_thumbs .item_age { 
    min-width: 4em; 
} 

enter image description here

https://jsfiddle.net/8172md5g/1/

2

はこれに2つのソリューションがあります。

一つは、その後の列が自動的に配置されます、テーブルを使用しています。

他には、使用、.datetimeクラス彼らに与える.imageと.DESCRIPTION

とそれぞれに幅を適用し、あなたの列に幅を固定されています。

.datetime { 
    display: block; 
    width: 25%; 
} 

.image { 
    display: block; 
    width: 25%; 
} 

.description { 
    display: block; 
    width: 50%; 
} 
関連する問題