Выровнять элементы по вертикали

@LALA_97 · Регистрация: 17.12.2016

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

Как выровнять элементы так, чтобы они были сдвинуты ровно по буквам отмеченным красным прямоугольником? Прикреплено фото

HTML5
1
2
3
4
5
6
7
8
9
10
11
 <div id="sidebar_container">
        <div class="sidebar" >
        <p id="sidebarheadline">Навигация по алфавиту</p>             
        <div class="sth"><a href="#za">А</a><a href="#zb">Б</a> <a href="#zv">В </a> <a href="#zg">Г</a><a href="#zd">Д</a><a href="#ze">Е</a><a href="#zzh">Ж</a></div>
        <div class="sth"><a href="#zz">З</a><a href="#zi">И</a> <a href="#zk">К</a> <a href="#zl">Л</a><a href="#zm">М</a><a href="#zn">Н</a><a href="#zo">О</a></div>
          <div class="sth"><a href="#zp">П</a><a href="#zr">Р</a> <a href="#zs">С</a> <a href="#zt">Т</a><a href="#zu">У</a><a href="#zf">Ф</a><a href="#zh">Х</a></div>
          <div class="sth"><a href="#zts">Ц</a><a href="#zch">Ч</a><a href="#zsh">Ш</a><a href="#zsch">Щ</a><a href="#zye"> Э</a><a href="#zyu">Ю</a>
<a href="#zya">Я</a></div>
        
      </div> 
      </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.sth 
{ display:table;
 }
 
 .sth a{
  display:table-cell;
  font:"Trebuchet MS", Arial, Helvetica, sans-serif;
  text-align:justify;  
  font-size:1.1em;
  color:#000;
  padding: 8px 8px 8px 8px;
  vertical-align:middle;
  }

@mrtoxas · 19.11.2019, 02:27

CSS
1
2
3
4
.sth a{
  min-width:17px;
  text-align: center;
}

Не обратил внимания, что таблицей сделали.

HTML5
1
2
3
4
<div class="sth-table">
      <div class="sth">
            <a href="#za">А</a>
            <!-- ... -->

CSS
1
2
3
4
5
6
7
8
9
10
.sth-table {
  display: table;
}
.sth {
  display: table-row;
}
.sth a {
  display: table-cell;
  text-align: center;
}

Как вариант

HTML5
1
2
3
<div class="sth">
  <a href="">А</a><a href="">Б</a><a href="">В</a><a href="">Г</a><a href="">Д</a><a href="">Е</a><a href="">Ж</a><a href="">З</a><a href="">И</a><a href="">К</a><a href="">Л</a><a href="">М</a><a href="">Н</a><a href="">О</a><a href="">П</a><a href="">Р</a><a href="">С</a><a href="">Т</a><a href="">У</a><a href="">Ф</a><a href="">Х</a><a href="">Ц</a><a href="">Ч</a><a href="">Ш</a><a href="">Щ</a><a href="">Э</a><a href="">Ю</a><a href="">Я</a>  
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
.sth{
  display:grid;
  grid-template-columns: repeat(7, min-content);
}
.sth a {
  font: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 1.1em;
  color: #000;
  padding: 8px;
  text-align:center;
}

@LALA_97 · 19.11.2019, 23:17 **[ТС]**

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

Не обратил внимания, что таблицей сделали.

<div class="sth-table">
<div class="sth">
<a href="#za">А</a>

Это не таблица...
просто разграничила div'ом

@mrtoxas · 19.11.2019, 23:32

Ваши стили говорят, что у вас блочная таблица, правда, некорректная

@LALA_97 · 19.11.2019, 23:48 **[ТС]**

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

.sth a{
min-width:17px;
text-align: center;
}

это работает более менее
спасибо

@mrtoxas · 20.11.2019, 13:09

Вот, не более-менее

PHP/HTML
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
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .sth-table {
      display: table;
    }
 
    .sth {
      display: table-row;
    }
 
    .sth a {
      display: table-cell;
      text-align: center;
      font: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.1em;
      color: #000;
      padding: 8px;
      vertical-align: middle;
    }
  </style>
</head>
 
<body>
  <div id="sidebar_container">
    <div class="sidebar">
      <p id="sidebarheadline">Навигация по алфавиту</p>
      <div class="sth-table">
        <div class="sth">
          <a href="#za">А</a><a href="#zb">Б</a><a href="#zv">В</a><a href="#zg">Г</a><a href="#zd">Д</a><a href="#ze">Е</a><a href="#zzh">Ж</a>
        </div>
        <div class="sth">
          <a href="#zz">З</a><a href="#zi">И</a><a href="#zk">К</a><a href="#zl">Л</a><a href="#zm">М</a><a href="#zn">Н</a><a href="#zo">О</a>
        </div>
        <div class="sth">
          <a href="#zp">П</a><a href="#zr">Р</a><a href="#zs">С</a><a href="#zt">Т</a><a href="#zu">У</a><a href="#zf">Ф</a><a href="#zh">Х</a>
        </div>
        <div class="sth">
          <a href="#zts">Ц</a><a href="#zch">Ч</a><a href="#zsh">Ш</a><a href="#zsch">Щ</a><a href="#zye">Э</a><a href="#zyu">Ю</a><a href="#zya">Я</a>
        </div>
      </div>
    </div>
  </div>
</body>
 
</html>

@LALA_97 · 20.11.2019, 13:37 **[ТС]**

mrtoxas, идеально! Спасибо!!!!

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	19.11.2019, 23:32
	Ваши стили говорят, что у вас блочная таблица, правда, некорректная 0

@LALA_97 0 / 0 / 0 Регистрация: 17.12.2016 Сообщений: 47
	20.11.2019, 13:37 [ТС]
	mrtoxas, идеально! Спасибо!!!! 0

Выровнять элементы по вертикали

Решение