У меня есть этот код на этом 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;
}
Как я могу решить эту проблему?
Это связано с тем, что изображения в вашей таблице подталкивают весь контент ниже их после того, как контент превышает 300 пикселей в ширину. Чтобы остановить его, вы можете установить img как таковой в свой css.
img{
display:block;
}
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.
}
Это потому, что изображения выровнены по вертикали (valign = "middle"). Css отображает его так, как будто он должен располагаться на самой линии, что означает, что длина линии будет растянута. Просто удалите его, и все должно быть хорошо.
попробуйте это из img {display: block;}
Установите изображение для блокировки. Как дисплей: блок
img {display: block;}
У вас много ошибок как в вашей разметке HTML, так и в коде CSS (всегда проверяйте свой код HTML + CSS).
Я исправил все ваши ошибки в jsFiddle.
"Ключ" к вашей проблеме состоит в том, что вам нужно установить vertical-align: middle
на img
Вот рабочий пример: jsFiddle
PS: Это не удается, если TD недостаточно широки, чтобы текст обернулся во вторую строку. В этом случае было бы лучше определить изображения в качестве background-image
и просто добавить padding-left: 80px
в td
.