Помогите сделать красиво центрированные столбцы с изображениями различных соотношений - PullRequest
Новая
       2

Помогите сделать красиво центрированные столбцы с изображениями различных соотношений

2 голосов
/ 29 июня 2011

Я пытаюсь сделать три столбца с названиями «пятница», «суббота» и «воскресенье». Каждый столбец будет содержать серию изображений, встроенных с помощью embedly (которые заканчиваются как теги <img>, где у меня есть a href на случай, если вам интересно).

У меня возникают проблемы с тем, чтобы изображения правильно центрировались прямо под заголовками столбцов, поскольку изображения имеют разные пропорции (не уверен, правильно ли я использую этот термин).

Например, это изображение намного шире, чем это изображение.

Вот мой код. 

<table>
    <tr>
        <th>Friday</th>
        <th>Saturday</th>
        <th>Sunday</th>
    </tr>
    <tr>
        <td><div class="featuredGame">
                <a href="http://www.flickr.com/photos/amandarykoff/5748058467/"></a>
                <p> Subway Series </p>
            </div>
        </td>
        <td>
            <div class="featuredGame">
                <a href="http://www.flickr.com/photos/amandarykoff/4732779602/"></a>
                <p> Subway Series </p>
            </div>
        </td>
        <td>
            <div class="featuredGame">
                        <a href="http://www.flickr.com/photos/5chw4r7z/3559678190/"></a>
                        <p> Subway Series </p>
            </div>
        </td>
    </tr>
    <tr>
        <td><div class="featuredGame">
                <a href="http://www.flickr.com/photos/adamzalaznik/4524246710/"></a>
                <p> Subway Series </p>
            </div>
        </td>
        <td>
            <div class="featuredGame">
                <a href="http://www.flickr.com/photos/24793373@N07/3823565546/"></a>
                <p> Subway Series </p>
            </div>
        </td>
        <td>
            <div class="featuredGame">
                <a href="http://www.flickr.com/photos/unbirthdayparty/5738164359/"></a>
                <p> Subway Series </p>
            </div>
        </td>
    </tr>
</table>

И CSS для featuredGame:

ПРИМЕЧАНИЕ тег #featured является преднамеренным. Эта таблица заключена в <div id="featured">

#featured .featuredGame {
    position: relative;
    height: auto;
    width: 150px;
    font-size: 1.0em;   
}

th td {text-align:center;}

Ответы [ 3 ]

2 голосов
/ 29 июня 2011

  1. ваше правило стилей пытается применить стили к элементу с id="featured" И class="featuredGame.Это одна из причин, почему он терпит неудачу.(По крайней мере, без встроенного кода.) Удалите id, и стили начнут работать.

  2. Изображения очень большие. Уменьшает ли их размер?Если нет, ваш дизайн таблицы будет плохо удерживать их в браузере со стандартным разрешением.

2 голосов
/ 29 июня 2011

в вас css блок положен margin-left:auto; margin-right:auto; это должно центрировать это

1 голос
/ 30 июня 2011

Попробуйте изменить 

th td {text-align:center;}

до 

th, td {text-align:center;}

http://jsfiddle.net/blineberry/ubmW3/

Это то, что вы ищете?

...