Центр кнопок CSS

86

Обычная проблема с центрированием CSS, просто не работает для меня, проблема в том, что я не знаю конечную ширину px

У меня есть div для всей навигации, а затем каждая кнопка внутри, они больше не центрируются, когда есть более одной кнопки. :(

CSS

.nav{
    margin-top:167px;
    width:1024px;
    height:34px;
}

.nav_button{
    height:34px;
    margin:0 auto;
    margin-right:10px;
    float:left;
}

HTML

<div class="nav">
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>

        </div>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>

        </div>
</div>

Любая помощь будет принята с благодарностью. благодаря

Результат

Если ширина неизвестна, я нашел способ расположить кнопки по центру, не совсем доволен, но не имеет значения, это работает: D

Лучше всего положить в таблицу

<table class="nav" align="center">
    <tr>
      <td>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>
        </div>

        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>
        </div>
      </td>
    </tr>
  </table>

css button center

— Стеваникус
источник

202

Я понимаю, что это очень старый вопрос, но сегодня я наткнулся на эту проблему и получил ее для работы.

<div style="text-align:center;">
    <button>button1</button>
    <button>button2</button>
</div>

Привет, Марк

— Markbaldy
источник

Обратите внимание, что другой элемент, который имеет стиль смещения вправо / влево рядом с этим элементом, может сделать его нецентральным.

— shlgug 07

1

<input class="btn btn-primary" style="text-align:center;display:block;" type="submit" value="{% trans 'ButtonPurpose' %}" />

— Надеюсь,

30

Рассмотрите возможность добавления этого в свой CSS, чтобы решить проблему:

button {
    margin: 0 auto;
    display: block;
}

— Амин
источник

4

Лучший ответ. Никаких посторонних контейнеров, (наверное) без недостатков.

— Конрад Галензовски

23

Еще один приятный вариант - использовать:

width: 40%;
margin-left: 30%;
margin-right: 30%

— Рани
источник

Это работает (и имеет смысл) для пользовательского интерфейса материала, если кнопка только одна внутри<Grid item>...</Grid>

— Хуан Сальвадор

— Мартин Волек

10

Проблема заключается в следующей строке CSS .nav_button:

margin: 0 auto;

Это сработало бы, только если бы у вас была одна кнопка, поэтому они смещены по центру, когда есть более одного nav_buttondiv.

Если вы хотите, чтобы все ваши кнопки по центру вложили nav_buttonsв другой div:

<div class="nav">
    <div class="centerButtons">
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>
        </div>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>
        </div>
    </div>
</div>

И придайте ему такой стиль:

.nav{
    margin-top:167px;
    width:1024px;
    height:34px;
}

/* Centers the div that nests the nav_buttons */
.centerButtons {
    margin: 0 auto;
    float: left;
} 

.nav_button{
    height:34px;
    margin-right:10px;
    float: left;
}

— Эспрессо
источник

2

спасибо за пост, к сожалению, тоже не работает, все еще слева.

— Стеваникус 01

Да, я только что это понял. Это потому, что .centerButtons является блочным элементом и занимает все пространство в .nav, делая свойства полей бесполезными. Я также пытался исправить это с помощью плавающих .centerButtons, но безуспешно.

— Эспрессо

да, я знаю, что это хитрый, меня раздражает, потому что я делал это раньше, но не могу вспомнить, как :) .... есть идеи?

— Стеваникус 02

1

Рассмотрите возможность добавления этого в свой CSS, чтобы решить проблему:

.btn {
  width: 20%;
  margin-left: 40%;
  margin-right: 30%;
}

— Исрар Аван
источник

-1

когда все остальное терпит неудачу, я просто

<center> content </center>

Я знаю, что это уже не "до стандартов", но если это работает, то работает

— отт
источник

12

Этот ответ ничего не добавляет к другим ответам. <center>устарел в HTML4 и даже не поддерживается в HTML5, а это значит, что он, вероятно, не будет работать, если используется HTML5.

— Magnilex 07

1

Я использую его, только если не могу заставить работать что-нибудь еще. Я использовал его на страницах, где есть html5, но предпочитаю этого не делать. Я прошел через все и заменил то, что мог<div align="center">button</div>

— от

Устаревший тег, использовать его - плохая практика

— Sunchock