CSS - Создание двух DIV внутри тега <th>

Question

Веб-сайт в ссылке: http://www.imvu -e.com / products / ht / clients / test /

Обратите внимание на таблицы, как у меня есть новая строка, разделяющая Итого и Часы, нопри вставке значка сортировки это выглядит странно.

В настоящее время это выглядит так:

     Total
Hours [v^]

Мне бы хотелось, чтобы это было так:

Total
Hours [v^]

Подумал, что наилучшим способом было бы поместить текст в элемент div, а значок в элемент div, а затем использовать значок div, чтобы он был плавающим, верно?

Было бы еще более удивительно, если бы я мог на самом деле сделать так, чтобы значок сортировки был также выровнен по вертикали, но это может потребовать слишком много:)

ps: я чувствую, что япрограммист-любитель / программист, но я никогда не могу сосредоточиться на позиционировании CSS;Может быть, это просто не очень хорошо сформулировано с плавающей точкой и тому подобное, или, может быть, учебники, которые я пытаюсь понять, просто смущают меня.Любые ссылки на некоторые полезные учебники будут отличными.Таким образом, мне не нужно полагаться на stackoverflow для CSS.Я хочу научиться этому, но плавающему, и все просто очень абстрактно.Не начинайте меня с того, почему вертикальное выравнивание не похоже на выравнивание текста, смеется.

Редактировать:

У меня сейчас так:

|         Total |
|    [v^] Hours |

Но мне бы хотелось вот так:

|         Total |
|[v^]     Hours |

Где значок [v ^] будет выровнен по вертикали.

Answer 1

Кажется, что работает правильно, если вы стилизуете элементы th с text-align: left.Это будет работать, потому что все столбцы достаточно узкие, поэтому не имеет значения, выровнены ли они по правому или левому краю.Просто добавьте text-align: right к вашему unsortable классу, и заголовок «Имя» вернется к своему текущему состоянию.

РЕДАКТИРОВАТЬ

Поскольку вы изменили свой вопрос:

Используйте vertical-align: middle на ваших th элементах сейчас.Проблема с использованием стратегии позиционирования заключается в том, что она не учитывает заголовки таблиц различной высоты и даже выглядит так, как будто она перекрывает некоторый ваш текст.

Использование vertical-align в данном конкретном случае иногда оставляет стрелкив первой строке, но это потому, что текст оттолкнул его.Это, однако, не позволит изображению сидеть поверх вашего текста, который выглядит еще хуже.Кроме того, вы увидите, что текст также выравнивается по вертикали, но я думаю, что это выглядит лучше, чем смещение их друг от друга.