Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
maksmesi
0 / 0 / 0
Регистрация: 08.11.2018
Сообщений: 18
1

Центрировать кнопки

15.02.2020, 11:55. Просмотров 100. Ответов 4
Метки css, html, php (Все метки)

Подскажите как центрировать две кнопки под логотипом.

HTML5
1
2
3
4
5
6
7
8
9
10
<div id="top">
        <div class="img">
            <img id="logor" src="http://logclubs.kz/wp-content/themes/log/img/logo-footer.png" alt="" >
        </div>
        <div id="area">
            <div class="area1"><a class="glo" id="glo1" href="">Общий зал</a></div>
            <div class="area2"><a class="glo" id="glo2" href="">VIP</a></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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#area {
        height: 150px;
        width: 100%;
        background-color: rgba(34, 41, 54, 0.7);
        position: relative;
        box-sizing: border-box;
        background: transparent;
        padding: 30px 0;
        text-align: center;
        margin: 0 auto;
        padding-top: 120px
    }
/*КНОПКА*/
 #area.area1 {
    width: 150px;
    height: 500px;
    float: left;
 
    
    
 }
 .area2{
    float: left;
 
 
 }
a.glo{
 color:#a3a7a8;
 padding: 10px 20px;
 width:100px;
 text-decoration:none;
 text-align:center;
 margin:20px auto;
 display: block;
 background-image: linear-gradient(to left,transparent,transparent 50%,#0b008e 50%,#0b008e);
 background-position: 100% 0;
 background-size: 200% 100%;
 transition: all .30s ease-in;
 font: 400 18px tahoma;
 border: 1px solid #a3a7a8;
 line-height: 40px;
        margin-bottom: 10px; 
        margin-left: 525px;
        float: left;
        position: relative;
}
a.glo:hover {
background-position: 0 0;
color:#ffffff;
}
0
Миниатюры
Центрировать кнопки  
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
15.02.2020, 11:55
Ответы с готовыми решениями:

Центрировать меню
Всем привет. Помогите пожалуйста с HTML и CSS Хочу поставить по центру меню CSS и как бы не...

Как центрировать блок?
вот такой вот банальный вопрос. думаю центрировать див, путем position:absolute, как это делаю я -...

Как центрировать ссылку?
Почему не применяется text-align: center к ссылке. Или каким еще способом можно выровнять ссылку по...

Центрировать текст вертикально
Как поместить &quot;Меню&quot; в центр фиолетового блока? А так же убрать отступы у фиолетового блока сверху...

Центрировать элементы на сайте
Добрый вечер, Может кто-нибудь подсказать, как выровнять элементы во &quot;вкладке&quot; по центру (под...

4
Кирилл848
Developer☭
28 / 17 / 2
Регистрация: 01.02.2019
Сообщений: 85
15.02.2020, 15:41 2
Это делается с помощью flexbox, вам достаточно в родительский класс прописать display: flex; и align-items: center;
то есть:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#area {
        height: 150px;
        width: 100%;
        background-color: rgba(34, 41, 54, 0.7);
        position: relative;
        box-sizing: border-box;
        background: transparent;
        padding: 30px 0;
        text-align: center;
        margin: 0 auto;
        padding-top: 120px
        display: flex; 
        align-items: center;
    }
попробуйте, только мне кажется Вам ещё придётся убрать float-ы в кнопках... про flex-ы можно почитать тут.

Добавлено через 7 минут

Не по теме:

Так же советую освоить данную методику позиционирования, она более удобная, чем float-ы и учится быстро. Вот к примеру тренажёр flexbox froggy

0
Flexinas
0 / 0 / 1
Регистрация: 08.05.2019
Сообщений: 25
15.02.2020, 19:26 3
Цитата Сообщение от Кирилл848 Посмотреть сообщение
Это делается с помощью flexbox, вам достаточно в родительский класс прописать display: flex; и align-items: center;
то есть:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#area {
        height: 150px;
        width: 100%;
        background-color: rgba(34, 41, 54, 0.7);
        position: relative;
        box-sizing: border-box;
        background: transparent;
        padding: 30px 0;
        text-align: center;
        margin: 0 auto;
        padding-top: 120px
        display: flex; 
        align-items: center;
    }
попробуйте, только мне кажется Вам ещё придётся убрать float-ы в кнопках... про flex-ы можно почитать тут.

Добавлено через 7 минут

Не по теме:

Так же советую освоить данную методику позиционирования, она более удобная, чем float-ы и учится быстро. Вот к примеру тренажёр flexbox froggy

А почему align-items: center a не justify-content: center; ? Насколько я понял их нужно выровнять по главной оси.
0
Кирилл848
Developer☭
28 / 17 / 2
Регистрация: 01.02.2019
Сообщений: 85
15.02.2020, 19:41 4
Flexinas, посмотрите вот эту маленькую статью, там в конце на практике показано как действует этот стиль. align-items выравнивает элементы по вертикали, а justify-content по горизонтали. Таким образом, при свойстве align-items: center; элементы будут по середине высоты блока.
Название: center.jpg
Просмотров: 9

Размер: 4.7 Кб
0
Flexinas
0 / 0 / 1
Регистрация: 08.05.2019
Сообщений: 25
15.02.2020, 19:51 5
Кирилл848, а понял да увидел что ему по вертикали нужно выровнять, я еще думал что и по горизонтали нужно выровнять чтобы обе кнопки были четко под логотипом.
0
15.02.2020, 19:51
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.02.2020, 19:51

Центрировать элементы в div'e
Задача такая у меня на экране расположены 2 картинки-ссылки хочется чтобы они находились по центру...

Центрировать сайт, относительно экрана
Как центрировать сайт? Если уменшить экран, сайт смещается в лево. Как на картинке внизу... ...

Как центрировать слайд-шоу?
Несколько часов провозился, никак не получается настроить вывод слайд-шоу по центру. 1. Модуль...


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.