слишком много места между строками в таблице

Question

слишком много места между строками в таблице

0

У меня есть этот код на этом jsfiddle, и у меня проблемы с выравниванием текста: поскольку вы можете видеть, что между линиями много места!

Зачем?

table {
    width: 700px;
    margin-left: 130px;
    margin-right: 130px;
}
tr {
    width: 500px;
    float: center;
}
td {
    display: table-cell;
    width: 300px;
    height: 100%;
    padding: auto 30px auto 30px;
    font-family: verdana, arial, sans-serif;
    font-size:13px;
    color:red;
    line-height: -3;
    text-align: right;
}

Как я могу решить эту проблему?

Anastasia Riabtzeva 19 сен. 2013, в 15:58

Источник

Теги:

html

css

5 ответов

Ещё вопросы

BenM · Answer 1 · 2013-09-19T12-16-00.000Z

Это связано с тем, что изображения в вашей таблице подталкивают весь контент ниже их после того, как контент превышает 300 пикселей в ширину. Чтобы остановить его, вы можете установить img как таковой в свой css.

img{
    display:block;
}

http://jsfiddle.net/9EL5f/1/

EDIT: Если вы хотите, чтобы ваш текст был посередине, вы должны пойти на чистый CSS-стиль и вообще не использовать HTML-таблицы.

например

<div id="col1"><img ... /><span>Text goes here</span></div>

Вы бы заполнили этот div тем количеством строк изображений и текста, которые хотели, а затем нарисуйте их в своем CSS. Затем вы повторите его для второго столбца. Ваш css для колонки будет выглядеть примерно так:

#col1{
    width:500px;
    float:left;
    margin-right:10px; //add space between this column and the next one.
    }

Нет! Потому что я хочу, чтобы изображение и текс выравнивались вертикально посередине вместе
И как я могу сделать таблицу только с помощью CSS? o.o
Вы можете создать два элемента <div> и использовать CSS для стилизации их в виде столбцов (задать ширину и т. Д.) И стилизовать изображения и текст в каждом столбце, как считаете нужным.
You Fiddle не является ответом на вопрос, и отображение изображений в виде «блока» - далеко не правильный ответ.

giorgio · Answer 2 · 2013-09-19T10-41-00.000Z

Это потому, что изображения выровнены по вертикали (valign = "middle"). Css отображает его так, как будто он должен располагаться на самой линии, что означает, что длина линии будет растянута. Просто удалите его, и все должно быть хорошо.

мне нужно вертикальное выравнивание в середине o.

Hitesh Shrimali · Answer 3 · 2013-09-20T03-32-00.000Z

попробуйте это из img {display: block;}

Jayesh Amin · Answer 4 · 2013-09-19T11-02-00.000Z

Установите изображение для блокировки. Как дисплей: блок

img {display: block;}

Netsurfer · Answer 5 · 2013-09-19T11-33-00.000Z

0

У вас много ошибок как в вашей разметке HTML, так и в коде CSS (всегда проверяйте свой код HTML + CSS).

Я исправил все ваши ошибки в jsFiddle.

"Ключ" к вашей проблеме состоит в том, что вам нужно установить vertical-align: middle на img

Вот рабочий пример: jsFiddle

PS: Это не удается, если TD недостаточно широки, чтобы текст обернулся во вторую строку. В этом случае было бы лучше определить изображения в качестве background-image и просто добавить padding-left: 80px в td.

Netsurfer 19 сен. 2013, в 11:33

0

Это просто хакерский подход, который все еще поощряет использование таблиц для разметки (также, почему вы добавили границу?). В идеале автор должен заново реализовать это, используя CSS для своих стилевых целей и навязывая разделение проблем между ее HTML и CSS.
BenM 19 сен. 2013, в 14:25
0

@BenM: А, а предложенное вами решение (см. JsFiddle) нет !? Помимо того, что элементы таблицы должны использоваться только для табличных данных, спрашивающий должен видеть, как таблица «работает». Что он не может по вашему предложению (вы также оставили ошибки в CSS). И я добавил границы только для демонстрационных целей, чтобы легко увидеть размеры ТД. Но все равно спасибо за голосование ...!
Netsurfer 19 сен. 2013, в 14:52
0

Нет мой не хакерский. Я указал поведение, которое является надежным и последовательным. Поведение, которое не будет зависеть от разной ширины, например. Затем я посоветовал, если они хотят правильно добиться эффекта центрирования, использовать чистый стиль CSS и забыть использовать таблицы.
BenM 19 сен. 2013, в 14:54

Показать ещё 1 комментарий