Перейти к содержимому


Выравнивание Таблицы, Выравнивание Текста Внутри Таблицы, Расстояние Между Строк

Выравнивание таблицы выравнивание текста внутри та расстояние между строк

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 3

#1 origina1

origina1

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 18 Июль 2013 - 16:21

Добрый день!

Страница http://вфутболке.рф/page/Glavnaya-new

Делаю выравнивание самой таблицы по центру и слова внутри ячеек

редактор.png

Получается вот такая байдовина

Выравнивание.png

Ни сама таблица ни сам текст не выравниваются в идеале.

Вот код:

<div style="text-align: center;">
<div><span style="font-size:26px;"><span style="font-family:trebuchet ms,helvetica,sans-serif;">ПОЧЕМУ ИМЕННО МЫ</span></span></div>
<table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 1000px;">
<tbody>
  <tr>
   <td><img alt="" src="http://files.storela...f675/680/Почему мы 1.png" style="width: 205px; height: 168px;" /></td>
   <td><img alt="" src="http://files.storela...f675/681/Почему мы 2.png" style="width: 205px; height: 168px;" /></td>
   <td><img alt="" src="http://files.storela...f675/683/Почему мы 3.png" style="width: 205px; height: 168px;" /></td>
   <td><img alt="" src="http://files.storela...f675/684/Почему мы 4.png" style="width: 205px; height: 168px;" /></td>
  </tr>
  <tr>
   <td><font face="trebuchet ms;"><span style="font-size: 22px;">Сроки изготовления<br />
   от 1 дня</span></font></td>
   <td><span style="font-family:trebuchet ms"><span style="font-size:22px;">Разработка<br />
   индивидуального<br />
   дизайна</span></span></td>
   <td><span style="font-family:trebuchet ms,helvetica,sans-serif;"><span style="font-size:22px;">При заказе свыше<br />
   2000 рублей<br />
   Доставка бесплатная</span></span></td>
   <td><span style="font-size:22px;"><span style="font-family:trebuchet ms,helvetica,sans-serif;">Различные виды<br />
   нанесения</span></span></td>
  </tr>
</tbody>
</table>
</div>
<div style="text-align: center;">&nbsp;</div>


И ещё вопрос как увеличить растоянние между строк, а то буквы заходят друг на друга.

Заранее благодарен.

#2 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 18 Июль 2013 - 20:01

Просмотр сообщенияorigina1 (18 Июль 2013 - 16:21) писал:

Добрый день!

Страница http://вфутболке.рф/page/Glavnaya-new

Делаю выравнивание самой таблицы по центру и слова внутри ячеек

Прикрепленный файл редактор.png

Получается вот такая байдовина

Прикрепленный файл Выравнивание.png

Ни сама таблица ни сам текст не выравниваются в идеале.

Вот код:

<div style="text-align: center;">
<div><span style="font-size:26px;"><span style="font-family:trebuchet ms,helvetica,sans-serif;">ПОЧЕМУ ИМЕННО МЫ</span></span></div>
<table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 1000px;">
<tbody>
  <tr>
   <td><img alt="" src="http://files.storela...f675/680/Почему мы 1.png" style="width: 205px; height: 168px;" /></td>
   <td><img alt="" src="http://files.storela...f675/681/Почему мы 2.png" style="width: 205px; height: 168px;" /></td>
   <td><img alt="" src="http://files.storela...f675/683/Почему мы 3.png" style="width: 205px; height: 168px;" /></td>
   <td><img alt="" src="http://files.storela...f675/684/Почему мы 4.png" style="width: 205px; height: 168px;" /></td>
  </tr>
  <tr>
   <td><font face="trebuchet ms;"><span style="font-size: 22px;">Сроки изготовления<br />
   от 1 дня</span></font></td>
   <td><span style="font-family:trebuchet ms"><span style="font-size:22px;">Разработка<br />
   индивидуального<br />
   дизайна</span></span></td>
   <td><span style="font-family:trebuchet ms,helvetica,sans-serif;"><span style="font-size:22px;">При заказе свыше<br />
   2000 рублей<br />
   Доставка бесплатная</span></span></td>
   <td><span style="font-size:22px;"><span style="font-family:trebuchet ms,helvetica,sans-serif;">Различные виды<br />
   нанесения</span></span></td>
  </tr>
</tbody>
</table>
</div>
<div style="text-align: center;">&nbsp;</div>


И ещё вопрос как увеличить растоянние между строк, а то буквы заходят друг на друга.

Заранее благодарен.
Попробуйте первую строку
<div style="text-align: center;">
заменить так
<div class="myClass" style="text-align: center;">
И перед всем этим кодом вставить такой
<style type="text/css">
.myClass td {
border: 3px ridge gray;
text-align: center;
line-height: 40px;
}
</style>
Здесь line-height: 40px; - высота, занимаемая текстом. Т.е. увеличение этого атрибута приведет к увеличению расстояния между строками.

#3 origina1

origina1

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 24 Июль 2013 - 15:15

Спасибо всё получилось! :rolleyes:

Теперь следующий вопрос возник

Litsevaya_stranitsa.png

Необходимо выровнять в таблице синие стрелочки по центру по вертикали.

<style type="text/css">.myClass td {
border: 0px ridge gray;
text-align: center;
line-height: 20px;
}
</style>
<div class="myClass" style="text-align: center;">
<div><span style="font-family:trebuchet ms;"><span style="font-size:26px;">КАК ОФОРМИТЬ ЗАКАЗ</span></span><br />
&nbsp;
<table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 1000px;">
<tbody>
  <tr>
   <td><img alt="" src="http://files.storeland.net/f685/102/заказ1.png" style="width: 164px; height: 173px;" /></td>
   <td><img alt="" src="http://files.storeland.net/f685/060/заказ-стрелка.png" style="width: 16px; height: 55px;" /></td>
   <td><img alt="" src="http://files.storeland.net/f685/103/заказ2.png" style="width: 164px; height: 173px;" /></td>
   <td><img alt="" src="http://files.storeland.net/f685/060/заказ-стрелка.png" style="line-height: 20px; text-align: center; width: 16px; height: 55px;" /></td>
   <td><a href="http://вфутболке.рф/feedback"><img alt="" src="http://files.storeland.net/f685/104/заказ3.png" style="width: 164px; height: 173px;" /></a></td>
   <td><img alt="" src="http://files.storeland.net/f685/060/заказ-стрелка.png" style="line-height: 20px; text-align: center; width: 16px; height: 55px;" /></td>
   <td><img alt="" src="http://files.storeland.net/f685/063/заказ4.png" style="width: 165px; height: 173px;" /></td>
   <td><img alt="" src="http://files.storeland.net/f685/060/заказ-стрелка.png" style="line-height: 20px; text-align: center; width: 16px; height: 55px;" /></td>
   <td><img alt="" src="http://files.storeland.net/f685/105/заказ5.png" style="width: 164px; height: 173px;" /></td>
  </tr>
  <tr>
   <td><span style="font-family:trebuchet ms;"><span style="font-size:20px;">Придумай</span></span></td>
   <td>&nbsp;</td>
   <td><span style="font-family:trebuchet ms;"><span style="font-size:20px;">Найди любую картинку</span></span></td>
   <td>&nbsp;</td>
   <td><big><span style="font-family:trebuchet ms;"><span style="font-size:20px;"><a href="http://вфутболке.рф/feedback"><span style="color:#00FF00;">Оформи заявку ONLINE</span></a></span></span></big></td>
   <td>&nbsp;</td>
   <td><span style="font-family:trebuchet ms;"><span style="font-size:20px;">Оплати при получении</span></span></td>
   <td>&nbsp;</td>
   <td><span style="font-family:trebuchet ms;"><span style="font-size:20px;">Носи с удовольствием!</span></span></td>
  </tr>
</tbody>
</table>
<br />
<br />
<br />
<span style="font-family:trebuchet ms;"><span style="font-size:26px;">ПОЧЕМУ ИМЕННО МЫ?</span></span></div>
<table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 1000px;">
<tbody>
  <tr>
   <td><img alt="" src="http://files.storeland.net/f675/680/Почему мы 1.png" style="width: 205px; height: 168px;" /></td>
   <td><img alt="" src="http://files.storeland.net/f675/681/Почему мы 2.png" style="width: 205px; height: 168px;" /></td>
   <td><img alt="" src="http://files.storeland.net/f675/683/Почему мы 3.png" style="width: 205px; height: 168px;" /></td>
   <td><img alt="" src="http://files.storeland.net/f675/684/Почему мы 4.png" style="width: 205px; height: 168px;" /></td>
  </tr>
  <tr>
   <td><font face="trebuchet ms"><span style="font-size: 20px;">Сроки изготовления<br />
   от 1 дня</span></font></td>
   <td><span style="font-family:trebuchet ms;"><span style="font-size:20px;">Разработка<br />
   индивидуального<br />
   дизайна</span></span></td>
   <td><span style="font-family:trebuchet ms;"><span style="font-size:20px;">При заказе свыше<br />
   2000 рублей<br />
   Доставка бесплатная</span></span></td>
   <td><span style="font-size:20px;"><span style="font-family:trebuchet ms;">Различные виды<br />
   нанесения</span></span></td>
  </tr>
</tbody>
</table>
</div>
<div class="myClass" style="text-align: center;"><br />
<br />
<br />
<span style="font-family:trebuchet ms,helvetica,sans-serif;"><span style="font-size: 26px;">С УДОВОЛЬСТВИЕМ НАНЕСЁМ ИЗОБРАЖЕНИЕ ИЛИ ВАШ ЛОГОТИП НА:</span></span><br />
&nbsp;
<table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 1000px;">
<tbody>
  <tr>
   <td><img alt="" src="http://files.storeland.net/f683/204/нанесём.png" style="width: 207px; height: 206px;" /></td>
   <td><img alt="" src="http://files.storeland.net/f683/205/нанесём2.png" style="width: 207px; height: 207px;" /></td>
   <td><img alt="" src="http://files.storeland.net/f683/206/нанесём3.png" style="width: 207px; height: 207px;" /></td>
   <td><img alt="" src="http://files.storeland.net/f683/207/нанесём4.png" style="width: 207px; height: 206px;" /></td>
  </tr>
  <tr>
   <td><span style="font-size:22px;">Спортивную форму</span></td>
   <td><span style="font-size:22px;">Спецодежду</span></td>
   <td><span style="font-size:22px;">Одежду для&nbsp;<br />
   промо-акций</span></td>
   <td><span style="font-size:22px;">Корпоративную<br />
   ​одежду</span><br />
   &nbsp;</td>
  </tr>
</tbody>
</table>
<br />
&nbsp;</div>


#4 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 24 Июль 2013 - 15:20

Просмотр сообщенияorigina1 (24 Июль 2013 - 15:15) писал:

Спасибо всё получилось! :rolleyes:

Теперь следующий вопрос возник

Прикрепленный файл Litsevaya_stranitsa.png

Необходимо выровнять в таблице синие стрелочки по центру по вертикали.

<style type="text/css">.myClass td {
border: 0px ridge gray;
text-align: center;
line-height: 20px;
}
</style>
<div class="myClass" style="text-align: center;">
<div><span style="font-family:trebuchet ms;"><span style="font-size:26px;">КАК ОФОРМИТЬ ЗАКАЗ</span></span><br />
&nbsp;
<table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 1000px;">
<tbody>
<tr>
<td><img alt="" src="http://files.storeland.net/f685/102/заказ1.png" style="width: 164px; height: 173px;" /></td>
<td><img alt="" src="http://files.storeland.net/f685/060/заказ-стрелка.png" style="width: 16px; height: 55px;" /></td>
<td><img alt="" src="http://files.storeland.net/f685/103/заказ2.png" style="width: 164px; height: 173px;" /></td>
<td><img alt="" src="http://files.storeland.net/f685/060/заказ-стрелка.png" style="line-height: 20px; text-align: center; width: 16px; height: 55px;" /></td>
<td><a href="http://вфутболке.рф/feedback"><img alt="" src="http://files.storeland.net/f685/104/заказ3.png" style="width: 164px; height: 173px;" /></a></td>
<td><img alt="" src="http://files.storeland.net/f685/060/заказ-стрелка.png" style="line-height: 20px; text-align: center; width: 16px; height: 55px;" /></td>
<td><img alt="" src="http://files.storeland.net/f685/063/заказ4.png" style="width: 165px; height: 173px;" /></td>
<td><img alt="" src="http://files.storeland.net/f685/060/заказ-стрелка.png" style="line-height: 20px; text-align: center; width: 16px; height: 55px;" /></td>
<td><img alt="" src="http://files.storeland.net/f685/105/заказ5.png" style="width: 164px; height: 173px;" /></td>
</tr>
<tr>
<td><span style="font-family:trebuchet ms;"><span style="font-size:20px;">Придумай</span></span></td>
<td>&nbsp;</td>
<td><span style="font-family:trebuchet ms;"><span style="font-size:20px;">Найди любую картинку</span></span></td>
<td>&nbsp;</td>
<td><big><span style="font-family:trebuchet ms;"><span style="font-size:20px;"><a href="http://вфутболке.рф/feedback"><span style="color:#00FF00;">Оформи заявку ONLINE</span></a></span></span></big></td>
<td>&nbsp;</td>
<td><span style="font-family:trebuchet ms;"><span style="font-size:20px;">Оплати при получении</span></span></td>
<td>&nbsp;</td>
<td><span style="font-family:trebuchet ms;"><span style="font-size:20px;">Носи с удовольствием!</span></span></td>
</tr>
</tbody>
</table>
<br />
<br />
<br />
<span style="font-family:trebuchet ms;"><span style="font-size:26px;">ПОЧЕМУ ИМЕННО МЫ?</span></span></div>
<table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 1000px;">
<tbody>
<tr>
<td><img alt="" src="http://files.storeland.net/f675/680/Почему мы 1.png" style="width: 205px; height: 168px;" /></td>
<td><img alt="" src="http://files.storeland.net/f675/681/Почему мы 2.png" style="width: 205px; height: 168px;" /></td>
<td><img alt="" src="http://files.storeland.net/f675/683/Почему мы 3.png" style="width: 205px; height: 168px;" /></td>
<td><img alt="" src="http://files.storeland.net/f675/684/Почему мы 4.png" style="width: 205px; height: 168px;" /></td>
</tr>
<tr>
<td><font face="trebuchet ms"><span style="font-size: 20px;">Сроки изготовления<br />
от 1 дня</span></font></td>
<td><span style="font-family:trebuchet ms;"><span style="font-size:20px;">Разработка<br />
индивидуального<br />
дизайна</span></span></td>
<td><span style="font-family:trebuchet ms;"><span style="font-size:20px;">При заказе свыше<br />
2000 рублей<br />
Доставка бесплатная</span></span></td>
<td><span style="font-size:20px;"><span style="font-family:trebuchet ms;">Различные виды<br />
нанесения</span></span></td>
</tr>
</tbody>
</table>
</div>
<div class="myClass" style="text-align: center;"><br />
<br />
<br />
<span style="font-family:trebuchet ms,helvetica,sans-serif;"><span style="font-size: 26px;">С УДОВОЛЬСТВИЕМ НАНЕСЁМ ИЗОБРАЖЕНИЕ ИЛИ ВАШ ЛОГОТИП НА:</span></span><br />
&nbsp;
<table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 1000px;">
<tbody>
<tr>
<td><img alt="" src="http://files.storeland.net/f683/204/нанесём.png" style="width: 207px; height: 206px;" /></td>
<td><img alt="" src="http://files.storeland.net/f683/205/нанесём2.png" style="width: 207px; height: 207px;" /></td>
<td><img alt="" src="http://files.storeland.net/f683/206/нанесём3.png" style="width: 207px; height: 207px;" /></td>
<td><img alt="" src="http://files.storeland.net/f683/207/нанесём4.png" style="width: 207px; height: 206px;" /></td>
</tr>
<tr>
<td><span style="font-size:22px;">Спортивную форму</span></td>
<td><span style="font-size:22px;">Спецодежду</span></td>
<td><span style="font-size:22px;">Одежду для&nbsp;<br />
промо-акций</span></td>
<td><span style="font-size:22px;">Корпоративную<br />
​одежду</span><br />
&nbsp;</td>
</tr>
</tbody>
</table>
<br />
&nbsp;</div>
В описание стилей в самом начале
<style type="text/css">
.myClass td {
border: 3px ridge gray;
text-align: center;
line-height: 40px;
}
</style>
добавьте строку vertical-align: middle;
<style type="text/css">
.myClass td {
border: 3px ridge gray;
text-align: center;
line-height: 40px;
vertical-align: middle;
}
</style>





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных