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

Как поставить текст по середине вертикально если ты выставил ему большую высоту

06.03.2020, 14:33. Показов 605. Ответов 1
Метки css, html (Все метки)

Студворк — интернет-сервис помощи студентам
Мне нужно просто что бы были 2 объекта рядом, одной высоты, и одинаково выравнены по середине.
Один обьект - картинка. Другой обьект текст.
А еще желательно что бы обьекты были одной высоты не потому что я поставил одинаковое значение высоты для них - а что бы они сами так выравнивались. То есть что бы я не писал 40px а что бы они адаптировались под размер по другому, главное что бы одинаковой высоты
Большое спасибо!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <title>Best Promocodes</title>
    <meta charset="utf-8">
    <link href="resources/css/index.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="resources/css/swiper.min.css">
    <link href="https://fonts.googleapis.com/css?family=Exo+2&display=swap" rel="stylesheet">
 
</head>
 
<body>
    <header>
        <div class="content-for-header">
            <div class="search-icon-full">
                <img src="resources/images/icon-search.png" class="any-button">
                <h3 class="any-button">Поиск по названию</h3>
            </div>
        </div>
    </header>   
</body>
</html>
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
* {
    margin: 0;
    padding: 0;
    font-family: 'Exo 2', sans-serif;
}
 
header {
    color: white;
    background-color: rgb(26, 45, 71);
    border-bottom: 5px solid rgb(31, 185, 253);
}
 
.any-button {
    border: 1.5px solid rgb(31, 185, 253);
    border-radius: 10px;
}
 
.search-icon-full {
    display: flex;
    align-items: center;
    margin: 5px;
}
 
.search-icon-full img , .search-icon-full h3 {
    height: 40px;
    margin: 3px;
    vertical-align: center;
}
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
06.03.2020, 14:33
Ответы с готовыми решениями:

Как поставить div по середине вертикально внутри другого div?
Заранее спасибо!! &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Best Promocodes&lt;/title&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;link...

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

Подстройка размера картинки под разрешение экрана (как поставить картинку по середине, чтобы была, я не знаю уже((( подскажите пож куда что поставить
HTML-код: &lt;table id=&quot;headerTb&quot; width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;&lt;tr&gt; &lt;td class=&quot;hdImg&quot;&gt;&lt;img class=&quot;topImg&quot;...

1
Эксперт JS
 Аватар для DrType
6553 / 3624 / 1075
Регистрация: 07.09.2019
Сообщений: 5,877
Записей в блоге: 1
06.03.2020, 15:09
Картинка и текст у Вас сейчас рядом и одинаково выровнены по высоте. Что ещё требуется? Можно задать высоту в пикселях или в em для .search-icon-full, а для его потомков определить height:100% ...
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
06.03.2020, 15:09
Помогаю со студенческими работами здесь

Как поставить textbox вертикально
Добрый день. Очень нужно поставить textbox вертикально. В ней будет просто подсчитывание строк. типо как у редакторов кода...

Выровнять меню вертикально по середине блока
&lt;div class=&quot;nav&quot;&gt; &lt;div class=&quot;wrapper&quot;&gt; &lt;div class=&quot;logo&quot;&gt; &lt;img src=&quot;img/logo.png&quot;&gt; &lt;div...

Расположение текста блочной ссылки вертикально по середине
Здравствуйте. Как при таких условиях: &lt;div class=&quot;div5&quot;&gt; &lt;a href=&quot;#&quot;&gt;LINK-5&lt;/a&gt; &lt;/div&gt; .div5{background-color: green; ...

первая страница шаблона имеее большую высоту как это можно исправить
Доброго дня. имею проблему, которую сам никак не могу решить, первая страница шаблона имеее большую высоту как это можно исправить ?...

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


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Мысли в слух. Про "навсегда".
kumehtar 16.04.2026
Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .
My Business CRM
MaGz GoLd 16.04.2026
Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .
Знаешь почему 90% людей редко бывают счастливыми?
kumehtar 14.04.2026
Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД
Maks 14.04.2026
Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code
Loafer 13.04.2026
{ "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .
Оптимизация кода на разграничение прав доступа к элементам формы
Maks 13.04.2026
Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений
Maks 12.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .
Архитектура слоя интернета для сервера-слоя.
Hrethgir 11.04.2026
В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru