Позиционирование текста по вертикали при display:inline-table

@Ser8191 · Регистрация: 17.01.2017

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

Здравствуйте. Подскажите как сделать текст по низу блока

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
div#menu_stolu{
position: fixed;
width:450px;
margin:10px 0 0 10px;
background-color:#FFF;
border: 1px solid #000; 
}
 
ul{
list-style-type: none;
margin-left: 0;
padding-left: 0;
font-size: 0;
}
 
ul.stolu li {
display: inline-table;
border: 1px solid #000;
width:100px;
height:100px;
font-size: 15px;
margin-right:10px;
margin-bottom:10px;
background-image:url(../img/menu/3.jpg);
background-repeat:no-repeat;
background-position: 50% 30%;   
background-size: contain;
text-align: center;
vertical-align:bottom;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
 <div id="menu_stolu">
<ul class="stolu">
<li>Текст</li>
<li>Текст</li>
<li>Текст</li>
<li>Текст</li>
<li>Текст</li>
<li>Текст</li>
<li>Текст</li>
<li>Текст</li>
<li>Текст</li>
</ul>
</div>

https://jsfiddle.net/gs5fqxL5/59/

@aj17 · 13.05.2018, 22:41

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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul.stolu li {
display: inline-table;
border: 1px solid #000;
width:100px;
height:100px;
font-size: 15px;
margin-right:10px;
margin-bottom:10px;
background-image:url(../img/menu/3.jpg);
background-repeat:no-repeat;
background-position: 50% 30%; * 
background-size: contain;
text-align: center;
vertical-align:bottom;
}

Замените на это:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul.stolu li {
    display: inline-flex;
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    font-size: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-image: url(../img/menu/shop_items_catalog_image453.jpg);
    background-repeat: no-repeat;
    background-position: 50% 30%;
    background-size: contain;
    text-align: center;
    align-items: flex-end;
}

Qwerty_Wasd · 13.05.2018, 22:55

А можно и так

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ul.stolu li {
display: inline-table;
border: 1px solid #000;
width:100px;
height:100px;
line-height:100px;
font-size: 15px;
margin-right:10px;
margin-bottom:10px;
background-image:url(../img/menu/shop_items_catalog_image453.jpg);
background-repeat:no-repeat;
background-position: 50% 30%;   
background-size: contain;
text-align: center;
vertical-align:bottom;
}

@Ser8191 · 15.05.2018, 13:14 **[ТС]**

Спасибо.
По центру - снизу вот так сделал

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul.stolu li {
    display: inline-flex;
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    font-size: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-image: url(../img/menu/shop_items_catalog_image453.jpg);
    background-repeat: no-repeat;
    background-position: 50% 30%;
    background-size: contain;
justify-content: center;
    align-items: flex-end;
}

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ