Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
Заблокирован

Выровнять по центру относительно нижнего блока

30.11.2019, 14:09. Показов 657. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
https://jsfiddle.net/v5ar7n3e/
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
<header>
        <a href="/" title="YouBlogs" class="logo" data="core_menu">Logo </a>
        <form action="/search/" method="POST">
               <input name="search" value="" placeholder="Введите запрос" type="text" autocomplete="off" maxlength="200">
        </form>
    <div class="user"> 
                            <div data="core_lg" class="yved icon noneyv0" title="Мои уведомления"><i class="fad fa-bell"></i><span>0</span></div>
                            <a href="/mycontent/" class="icon fad fa-folder-plus" title="Мой контент"></a>
                            <div class="pr noneyv0 yved" title="Мой профиль"><img src="/uploads/2-profile/1.png" data="core_menurig" class="p_img"></div>
        </div>
</header>
<main class='active'>
        <div class="content_main  content_p">
                Контент
    </div>
</main>
</body>
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
 
html, body {
    position: relative;
    font-family: Roboto, Arial, sans-serif;
    word-wrap: break-word;
    min-height: 100%;
    background: #f9f9f9;
    letter-spacing: 0.5px;
    margin: 0 auto;
    box-shadow: 0 0 5px 0 #efefef;
}
 
header {
    display: flex;
    align-items: center;
    width: 100%;
    background: #fff;
    position: fixed;
    z-index: 1200;
    height: 60px;
}
 
header .user {
    display: grid;
    grid-template-columns: auto 1fr 13%;
    padding: 0 10px;
    width: 21%;
    min-width: 180px;
    max-width: 280px;
    height: 100%;
}
 
header input {
    font-weight: normal;
    width: 100%;
    letter-spacing: 1px;
    background: none;
    border: 0;
    border-radius: 3px 0 0 3px;
}
 
.logo {
    white-space: nowrap;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    padding: 12px 10px;
    font-weight: 600;
    font-size: 30px;
    color: #000;
    width: 100%;
    max-width: 240px;
}
 
header form {
    background: url(/tpl/image/fon.png) repeat #f3f3f3;
    border-radius: 3px;
    width: 100%;
        max-width: 300px;
    margin: 0 auto;
}
 
main {
    position: relative;
    min-height: 100%;
    width: 100%;
    display: flex;
    padding-top: 60px;
    overflow: hidden;
    background: #fff;
}
 
.content_main {
    letter-spacing: 1px;
    z-index: 2;
    position: relative;
    width: 100%;
    margin-left: 240px;
    background: #fff;
}
 
.active .content_main {
    display: grid;
    grid-template-columns: auto minmax(380px, 27%);
    margin-left: 0;
        max-width: 300px;
    background: #000;
    margin: 0 auto;
    padding: 20px 0;
    grid-gap: 20px;
}
Как сделать так, чтобы строка поиска была выравнена относительно нижнего блока, при условии что правый и левый блок имеют не фиксированную ширину. От сюда положения поисковой строчки немного отличается от положения нижнего блока
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
30.11.2019, 14:09
Ответы с готовыми решениями:

Выровнять картинку относительно экрана по центру
Как сделать чтоб картинка выровнялась по центру не только слева - справа, но и сверху - снизу? Можно как-то обойти использование Java...

Выровнять элементы блока по центру
Добрый день, Есть в блоке 4 элемента, а именно &lt;div class=&quot;title&quot;&gt;Проверка&lt;/div&gt; &lt;label...

Выровнять фон по центру зв пределами родительского блока CSS
День добрый. Помогите решить проблемку. Уже который час бьюсь, ничего не получается. Есть контейнер &lt;div id=&quot;container&quot;&gt; ...

3
Заблокирован
01.12.2019, 10:38  [ТС]
Мужики, хелп
0
Модератор
Эксперт HTML/CSS
 Аватар для AlexZaw
2380 / 1740 / 677
Регистрация: 07.08.2016
Сообщений: 4,094
01.12.2019, 13:00
Gerd199, с вашей разметкой без JS никак
0
76 / 52 / 26
Регистрация: 04.04.2019
Сообщений: 191
01.12.2019, 14:17
Если по-быстрому, то сделайте в header 3 колонки (первую и третью - одинакового размера). А в них уже размещайте свои .logo и .user
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
01.12.2019, 14:17
Помогаю со студенческими работами здесь

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

Как выровнять текст по центру между верхней и нижней границей блока div?
Собственно, как выровнять текст по центру между верхней и нижней границей блока div?

Выровнять ul по центру
Всем привет. Прошу помощи в выравнивании горизонтального меню по центру. код меню &lt;ul id=&quot;menu&quot;&gt; ...

выровнять по центру
во есть код сранички &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;...

Выровнять по центру
Привет всем. Нужно выровнять блок со словами по центру , но не могу понять как это сделать , пытался сделать с помощью margin 0 auto , но...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Реалии
Hrethgir 01.03.2026
Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten
8Observer8 27.02.2026
Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru