Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
0 / 0 / 0
Регистрация: 03.06.2013
Сообщений: 29
1

Выравнивание по центру

21.01.2016, 17:20. Показов 834. Ответов 4
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Подскажите пожалуйста, как выровнять по центру? Если убрать float left картинки размещаются по центру, но в 1 столбик.
http://i10.pixs.ru/storage/5/9... 346593.png
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

<div class="customsfera">
<div class="sfera">
    <div class="imgsf"><img src="images/sfera/p_1.jpg" alt="" />
        <div class="textsf">Начинающим<br />предпринимателям<br /><strong>в интернете</strong>
        </div>
    </div>
    <div class="imgsf"><img src="images/sfera/p_2.jpg" alt="" />
        <div class="textsf">Начинающим<br />предпринимателям<br /><strong>в интернете</strong>
        </div>
    </div>
    <div class="imgsf"><img src="images/sfera/p_4.jpg" alt="" />
        <div class="textsf">Начинающим<br />предпринимателям<br /><strong>в интернете</strong>
        </div>
    </div>
    <div class="imgsf"><img src="images/sfera/p_5.jpg" alt="" />
        <div class="textsf">Начинающим<br />предпринимателям<br /><strong>в интернете</strong>
        </div>
    </div>
    <div class="imgsf"><img src="images/sfera/p_6.jpg" alt="" />
        <div class="textsf">Начинающим<br />предпринимателям<br /><strong>в интернете</strong>
        </div>
    </div>
    <div class="imgsf"><img src="images/sfera/p_9.jpg" alt="" />
        <div class="textsf">Начинающим<br />предпринимателям<br /><strong>в интернете</strong>
        </div>
    </div>
</div>
</div>
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

.customsfera {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    overflow: auto;
    white-space: nowrap;
    text-align: center;
    font-size: 0;
    
    &:before {
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        content: '';
    }
}
 
.sfera {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    text-align: left;
    
    img {
        display: block;
        border: none;
    }
}
 
 
.imgsf{
    float:left;
    margin:10px 20px 0 0;
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 21.01.2016, 17:20
Ответы с готовыми решениями:

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

Выравнивание по центру
Размещаю кнопку для печати страницы, в хроме кнопка показывается по центру страницы, во всех...

Выравнивание по центру
Добрый день Подскажите пожалуйста, в самом низу с левой стороны есть кнопки соц сетей, как их...

Выравнивание по центру
Здравствуйте, создал 2 кнопки css и не могу все сделать, так чтобы они были по центру страницы....

4
8 / 8 / 3
Регистрация: 18.04.2014
Сообщений: 56
21.01.2016, 17:33 2
Если я правильно вас понял.

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
39
40
41
42

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <div class="customsfera">
            <div class="sfera">
                    <div class="centr">
                        <div class="imgsf"><img src="jpg" alt="" />
                            <div class="textsf">Начинающим<br />предпринимателям<br /><strong>в интернете</strong>
                            </div>
                        </div>
                        <div class="imgsf"><img src="https://www.cyberforum.ru/images/sfera/p_2.jpg" alt="" />
                            <div class="textsf">Начинающим<br />предпринимателям<br /><strong>в интернете</strong>
                            </div>
                        </div>
                        <div class="imgsf"><img src="https://www.cyberforum.ru/images/sfera/p_4.jpg" alt="" />
                            <div class="textsf">Начинающим<br />предпринимателям<br /><strong>в интернете</strong>
                            </div>
                        </div>
                    </div>
                    <div class="centr">
                        <div class="imgsf"><img src="https://www.cyberforum.ru/images/sfera/p_5.jpg" alt="" />
                            <div class="textsf">Начинающим<br />предпринимателям<br /><strong>в интернете</strong>
                            </div>
                        </div>
                        <div class="imgsf"><img src="https://www.cyberforum.ru/images/sfera/p_6.jpg" alt="" />
                            <div class="textsf">Начинающим<br />предпринимателям<br /><strong>в интернете</strong>
                            </div>
                        </div>
                        <div class="imgsf"><img src="https://www.cyberforum.ru/images/sfera/p_9.jpg" alt="" />
                            <div class="textsf">Начинающим<br />предпринимателям<br /><strong>в интернете</strong>
                            </div>
                        </div>
                    </div>
            </div>
        </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

.centr {
    margin: auto;
}
 
.customsfera {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    overflow: auto;
    white-space: nowrap;
    text-align: center;
    font-size: 0;
    
    &:before {
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        content: '';
    }
}
 
.sfera {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    text-align: left;
    
    img {
        display: block;
        border: none;
    }
}
 
 
.imgsf{
    float:left;
    margin:10px 20px 0 0;
}
1
0 / 0 / 0
Регистрация: 03.06.2013
Сообщений: 29
21.01.2016, 17:46  [ТС] 3
Спасибо все работает, только почему-то, когда картинки становятся в 2 колонки, то не выравниваются по центу. Не подскажете как подправить?
0
8 / 8 / 3
Регистрация: 18.04.2014
Сообщений: 56
21.01.2016, 17:53 4
В каком случае у вас картинки становятся в две колонки?

У вас теперь изображения разбиты на два блока по три картинки с соответствующим стилем и автоматически выравниваются по центру. Если хотите картинки в две колонки - разделите на три блока по две картинки.
0
0 / 0 / 0
Регистрация: 03.06.2013
Сообщений: 29
21.01.2016, 17:54  [ТС] 5
Ну там размер меняется в зависимости от размера экрана
0
21.01.2016, 17:54
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 21.01.2016, 17:54
Помогаю со студенческими работами здесь

Выравнивание по центру
ребят я делаю сайт профисионально этим не занимаюсь.. скачал шаблон бесплатный и на dreamweaver'е...

Выравнивание по центру
&lt;style type=&quot;text/css&quot;&gt; body{ margin: 0 auto; } .lemon { width: 200px; height:...

Выравнивание по центру
Я делаю меню для html страницы, но не как немого меню поставить по середине. &lt;!DOCTYPE HTML&gt;...

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


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

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