Выровнять таблицу по горизонтали

@kilometer · Регистрация: 02.08.2018

Студворк — интернет-сервис помощи студентам

Не могу выровнять текст по горизонтали, по ширине. И в стилях пробовала подставлять значения text-align и в html, никак.Подскажите, в чем ошибка?

HTML5
1
2
3
4
5
6
7
<table class="aligncenter" style="height: 56px; width: 117.583%; border-collapse: collapse; background-color: #e81313;" border="0">
<tbody>
<tr>
<td style="width: 100%; align="center";"><span style="color: #ffffff; text-align: center;"><strong><span style="font-family: helvetica, arial, sans-serif; font-size: 16px; text-align: center; ">ЗДРАВСТВУЙ, ДОРОГОЙ ДРУГ!</span></strong></span></td>
</tr>
</tbody>
</table>

@AlexZaw · 30.08.2018, 15:32

Вы путаете атрибут align с css свойством text-align, правильно вот так:

HTML5
1
2
3
4
5
6
7
<table class="aligncenter" style="height: 56px; width: 117.583%; border-collapse: collapse; background-color: #e81313;" border="0">
<tbody>
<tr>
<td style="width: 100%; text-align:center";"><span style="color: #ffffff;"><strong><span style="font-family: helvetica, arial, sans-serif; font-size: 16px; ">ЗДРАВСТВУЙ, ДОРОГОЙ ДРУГ!</span></strong></span></td>
</tr>
</tbody>
</table>

@kilometer · 30.08.2018, 16:04 **[ТС]**

Cделала, как у Вас, не передвигается текст. Посмотрела в Файрфоксе, пишет, что из body берет родительское. Как же это поправить, весь текст тогда уплывет...

Добавлено через 4 минуты
А если через css менять, то как понять, в каком файле стиль именно этой таблицы и именно та строка?Они же не все в style.css сидят?

@AlexZaw · 30.08.2018, 16:05

Для приведенного куска кода текст в ячейке выравнивается по центру. Если у вас что то не получается, значит проблема в другом месте, и не видя полного кода помочь вам вряд ли возможно.
Кстати очень странно что у вас инлайн стили перебиваются наследуемыми...

@kilometer · 30.08.2018, 16:21 **[ТС]**

Я на Вордпрессе все делаю, но как правило, пишу все ручками, в html, без плагинов и др. компонентов. Единственное, что иногда использую Tiny MCE, но и теперь от него наверное откажусь, т.к. сильно плывет форматирование после него и много лишних тегов добавляется.

Добавлено через 12 минут
вот полный код всей таблицы, посмотрите пожалуйста.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<table class="aligncenter" style="height: 56px; width: 117.583%; border-collapse: collapse; background-color: #e81313;" border="0">
<tbody>
<tr>
<td style="width: 100%; text-align:center";"><span style="color: #ffffff;"><strong><span style="font-family: helvetica, arial, sans-serif; font-size: 16px; ">ЗДРАВСТВУЙ, ДОРОГОЙ ДРУГ!</span></strong></span></td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<table style="width: 100%; border-collapse: collapse; height: 200px;" border="0">
<tbody>
<tr style="height: 200px;">
<td style="width: 25%; height: 200px;"><img class="aligncenter wp-image-694 size-thumbnail" src="http://domen/wp-content/uploads/ееее-150x150.png" alt="" width="150" height="150" /></td>
<td style="width: 25%; height: 133px;"><img class="aligncenter wp-image-696 size-thumbnail" src="http://domen/wp-content/uploads/ыыыы-150x150.png" alt="" width="150" height="150" /></td>
<td style="width: 25%; height: 133px;"><img class="aligncenter wp-image-693 size-thumbnail" src="http://domen/wp-content/uploads/вввв-150x150.png" alt="" width="150" height="150" /></td>
<td style="width: 25%; height: 133px;"><img class="aligncenter wp-image-695 size-full" src="http://domen/wp-content/uploads/226.png" alt="" width="150" height="165" /></td>
</tr>
<tr style="height: 204px;">
<td style="width: 25%; height: 204px;"><span style="font-size: 12px;">Общая почта</span></td>
<td style="width: 25%; height: 204px;">
<p><span style="font-size: 12px;">Наружная почта.</span></p>
<p><span style="font-size: 12px;">Внутренняя почта</span></p>
</td>
<td style="width: 25%; height: 204px;">
<p><span style="font-size: 12px;">кресла.</span></p>
<p><span style="font-size: 12px;">диваны</span></p>
</td>
<td style="width: 25%; height: 204px;">
<p><span style="font-family: helvetica, arial, sans-serif; font-size: 12px;">номер1</span></p>
<p><span style="font-family: helvetica, arial, sans-serif; font-size: 12px;">номер2</span></p>
<p><span style="font-family: helvetica, arial, sans-serif; font-size: 12px;">номер 3.</span></p>
</td>
</tr>
</tbody>
</table>

@AlexZaw · 30.08.2018, 16:32

В приведенном коде, опять же, текст "ЗДРАВСТВУЙ, ДОРОГОЙ ДРУГ!" находится по центру.

Сообщение от kilometer

А если через css менять, то как понять, в каком файле стиль именно этой таблицы и именно та строка?Они же не все в style.css сидят?

Когда вы выбираете элемент в отладчике, вам показывается в каком файле и на какой строке находится описание его стилей
Например:

@kilometer · 30.08.2018, 16:48 **[ТС]**

Их там куча целая, справа в файрфоксе.
вот все из правой колонки:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
элемент {
    width: 100%;
    text-align: center;
}
* {
    margin: 0;
    padding: 0px;
    outline: none;
}
*, ::before, ::after {
    box-sizing: border-box;
}
элемент {
    border-collapse: collapse;
}
table {
    border-collapse: collapse;
}
body {
    word-wrap: break-word;
    font: 12px/22px arial;
        font-family: arial;
    color: #5b5b5b;
    font-family: Montserrat;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
}
 
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

А у меня получается, если наглядно смотреть в файрфоксе, что я навожу на нужную строку таблицы, а она делится невидимым пунктиром, который в свою очередь делит всю строку таблицы пополам. Я думаю, поэтому и фиксация идет по центру ширины не всей строки, а ее половинной части. Вот картинку прикрепляю, голубой пунктир.

@AlexZaw · 30.08.2018, 17:02

У вас span случайно стилями на 100% не растягивается?

Если вы хотите изучить верстку, мой вам совет, не начинайте со всяких cms и фреймворков, учите все с нуля и по порядку.

@kilometer · 30.08.2018, 17:30 **[ТС]**

Спасибо,посмотрю на счет span, а вообще как мне выбрать из предложенных строк кода стилей,которые справа в файрфоксе появляются по нажатию на свой элемент, как выбрать тот самый стиль или строку,их же там несколько?Выше я привела все,что было справа в файрфоксе

@AlexZaw · 30.08.2018, 17:48

Сообщение от kilometer

как выбрать тот самый стиль или строку,их же там несколько

Все что указано справа это все стили которые применяются к элементу, а там уже смотрите что и как влияет на ваш элемент, возможно один и тот же стиль применяется в нескольких местах, как например:

элемент {
border-collapse: collapse;
}
table {
border-collapse: collapse;
}

Указывает что стиль border-collapse: collapse; применяется для элемента в инлайн стилях, и в css для элемента table

@kilometer · 31.08.2018, 10:50 **[ТС]**

Спасибо!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	30.08.2018, 16:04 [ТС]
	Cделала, как у Вас, не передвигается текст. Посмотрела в Файрфоксе, пишет, что из body берет родительское. Как же это поправить, весь текст тогда уплывет... Добавлено через 4 минуты А если через css менять, то как понять, в каком файле стиль именно этой таблицы и именно та строка?Они же не все в style.css сидят? 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	30.08.2018, 16:05
	Для приведенного куска кода текст в ячейке выравнивается по центру. Если у вас что то не получается, значит проблема в другом месте, и не видя полного кода помочь вам вряд ли возможно. Кстати очень странно что у вас инлайн стили перебиваются наследуемыми... 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	30.08.2018, 17:02
	У вас span случайно стилями на 100% не растягивается? Если вы хотите изучить верстку, мой вам совет, не начинайте со всяких cms и фреймворков, учите все с нуля и по порядку. 0

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	30.08.2018, 17:30 [ТС]
	Спасибо,посмотрю на счет span, а вообще как мне выбрать из предложенных строк кода стилей,которые справа в файрфоксе появляются по нажатию на свой элемент, как выбрать тот самый стиль или строку,их же там несколько?Выше я привела все,что было справа в файрфоксе 0

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	31.08.2018, 10:50 [ТС]
	Спасибо! 0