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

Почему мой Div не находиться в середине страницы

21.12.2019, 01:47. Показов 1507. Ответов 10

Author24 — интернет-сервис помощи студентам
HTML5
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
<!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>Aventura's Barbers</title>
     <link href="resources/css/index.css" rel="stylesheet" type="text/css"/>
    </head>
 
    <body>
        <main>
            
            <section class="gallery">
                <div class="gallery-img">
                        <div class="right">
                            <img src="resources/images/img1.jpeg">
                        </div>
                </div>
                <div class="gallery-img">
                    <div class="right">
                        <img src="resources/images/img2.jpeg">
                    </div> 
                </div>
            </section>
        </main>
 
    </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
html, body, ul, header {
    margin: 0;
    padding: 0;
}
 
html {
    background-color: rgb(17, 17, 19);
}
 
 
/* Gallery */
.gallery {
    display: inline-flex;
    width: 50%;
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
 
.gallery-img img{
    height: 100px;
    width: auto;
    padding: 20px 20px;
}
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.12.2019, 01:47
Ответы с готовыми решениями:

Div по середине страницы
Есть вот такой html: &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Language&quot; content=&quot;en-us&quot;&gt; ...

Почему мой div так странно позиционируется?
У меня есть страница с дивами, в аттаче есть скриншот. У меня 5 основных блоков (AAA, BBB, CCC,...

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

Как установить дочерний div по середине
Нужно .name по середине установить так чтобы он был на .right &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;...

10
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
21.12.2019, 01:59 2
Andrews8888, Andrews8888, Все центрируется нормально. Div .gallery-img находятся по центру.
0
0 / 0 / 0
Регистрация: 21.12.2019
Сообщений: 39
21.12.2019, 02:39  [ТС] 3
.gallery-img да но .gallery находиться слева а не по середине
0
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
21.12.2019, 03:58 4
Andrews8888, так вы ничего для этого и не сделали)
CSS
1
.gallery{margin: 0 auto;}
Добавлено через 1 минуту
и да .gallery не div у вас это section
0
0 / 0 / 0
Регистрация: 21.12.2019
Сообщений: 39
21.12.2019, 10:23  [ТС] 5
margin ничего не исправил ... ((
0
238 / 161 / 67
Регистрация: 18.06.2016
Сообщений: 509
21.12.2019, 10:46 6
нужно что бы .gallery находился по центру задайте ему ширину 100% у вас же 50% она на данный момент

CSS
1
2
3
4
5
6
7
8
.gallery {
    display: inline-flex;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
margin не поможет так как у вас display: inline-flex;

или нужно что бы он остался 50% и по центру? я просто не понимаю

Так то он центрирован, просто у него ширина пол окна
0
0 / 0 / 0
Регистрация: 21.12.2019
Сообщений: 39
21.12.2019, 10:59  [ТС] 7
Вообщем давайте объясню идею.

Мне нужно разместить 2 фотографии рядом но что бы они были посередине страницы и на двоих занимали типо 90% страницы

Спасибо за помощ
0
238 / 161 / 67
Регистрация: 18.06.2016
Сообщений: 509
21.12.2019, 11:25 8
нарисуйте
0
0 / 0 / 0
Регистрация: 21.12.2019
Сообщений: 39
21.12.2019, 14:31  [ТС] 9
Просто нужно такое сообщение что бы gallery была всегда на примерно 80% экрана и в ней помещались 2 картинки.
Миниатюры
Почему мой Div не находиться в середине страницы  
0
238 / 161 / 67
Регистрация: 18.06.2016
Сообщений: 509
21.12.2019, 16:59 10
Лучший ответ Сообщение было отмечено Andrews8888 как решение

Решение

HTML5
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
<!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>Aventura's Barbers</title>
     <link href="resources/css/index.css" rel="stylesheet" type="text/css"/>
    </head>
 
    <body>
        <main>
            
            <section class="gallery">
                <div class="gallery-img">
                        <div class="right">
                            <img src="resources/images/img1.jpg">
                        </div>
                </div>
                <div class="gallery-img">
                    <div class="right">
                        <img src="resources/images/img2.jpg">
                    </div> 
                </div>
            </section>
        </main>
 
        <div class="delete">
            <h1 style="text-align: center;">Tекст</h1>
 
            <p style="padding-top:25px;">Какой либо текст под фотографиями, как вариант увидеть процесс маштабирования окна браузера </p>
 
            <p>Равным образом консультация с широким активом требуют определения и уточнения модели развития. Таким образом реализация намеченных плановых заданий позволяет оценить значение новых предложений. Таким образом новая модель организационной деятельности способствует подготовки и реализации систем массового участия.</p>
        </div>
 
    </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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
html {
    background-color: rgb(17, 17, 19);
}
 
 
/* Gallery */
main {
    width: 100%;
    display: flex;
    justify-content: center;
}
 
.gallery {
    display: inline-flex;
    width: 80%;
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
}
 
.gallery-img {
    width: 50%;
}
 
.gallery-img img{
    width: 100%;
    padding: 20px 20px;
}
 
.delete {
    margin: 0 auto;
    font-size: 2rem;
    padding: 10px;
    width:50%;
    color:wheat;
}
Так?
1
0 / 0 / 0
Регистрация: 21.12.2019
Сообщений: 39
21.12.2019, 18:50  [ТС] 11
Наконец то заработало!
Большое спасибо, теперь я понял зачем нужен flex

Успехов вам!
0
21.12.2019, 18:50
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
21.12.2019, 18:50
Помогаю со студенческими работами здесь

Выровнять содержимое div по середине экрана
У меня есть Div с картиками и текстом и мне надо выровнять содержимое div а по середине экрана! ...

На вкладке Мой мир, на портале mail.ru идет постоянная загрузка страницы - Мой Мир, в чем дело?
На вкладке Мой мир, на портале mail.ru идет постоянная загрузка страницы - Мой Мир, в чем проблема?...

Как вытащить все что между <div и </div> в html коде страницы?
часть html кода страницы: ..................... &lt;div class=&quot;labeled name&quot;&gt;&lt;a...

Как в div загружать страницы из другого блока div?
Здравствуйте. Кто сможет помочь мне в одном вопросе? Как можно загрузить по ссылке страницу из...


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

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru