Centrum przycisków CSS

85

Zwykły problem z centrowaniem CSS, po prostu nie działa dla mnie, problem polega na tym, że nie znam końcowej szerokości px

Mam element div dla całej nawigacji, a następnie każdy przycisk w środku, nie wyśrodkowują już, gdy jest więcej niż jeden przycisk. :(

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>

Każda pomoc byłaby bardzo mile widziana. Dzięki


Wynik

Jeśli szerokość jest nieznana, znalazłem sposób na środek przycisków, nie do końca szczęśliwy, ale nie ma to znaczenia, działa: D

Najlepszym sposobem jest umieszczenie go w stole

<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>
Stevanicus
źródło

Odpowiedzi:

201

Zdaję sobie sprawę, że to bardzo stare pytanie, ale natknąłem się dziś na ten problem i udało mi się go rozwiązać

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

Pozdrawiam, Mark

markbaldy
źródło
Zauważ, że inny element, który ma styl przesunięcia w prawo / lewo w pobliżu tego elementu, może sprawić, że będzie on wyglądał poza środkiem.
shlgug
1
Ufam, że masz rację, ale czy jest powód, aby tego nie robić<input class="btn btn-primary" style="text-align:center;display:block;" type="submit" value="{% trans 'ButtonPurpose' %}" />
RobotHumans,
26

Rozważ dodanie tego do swojego CSS, aby rozwiązać problem:

button {
    margin: 0 auto;
    display: block;
}
Jestem w
źródło
4
Najlepsza odpowiedź. Brak zewnętrznych pojemników, (prawdopodobnie) żadnych wad.
Konrad Gałęzowski
23

Inną fajną opcją jest użycie:

width: 40%;
margin-left: 30%;
margin-right: 30%
Rani
źródło
Działa (i ma sens) dla Material UI, jeśli przycisk jest tylko jeden w środku a<Grid item>...</Grid>
Juan Salvador,
O niezły pomysł :)
Martin Volek
10

Problem jest z następującą linią CSS na .nav_button:

margin: 0 auto;

To zadziałałoby tylko wtedy, gdybyś miał jeden przycisk, dlatego są one wyśrodkowane, gdy jest więcej niż jeden nav_buttonelement div.

Jeśli chcesz, aby wszystkie twoje przyciski były wyśrodkowane, nav_buttonsw innym 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>

I ułóż to w ten sposób:

.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;
}
Espresso
źródło
2
dzięki za twój post, niestety też nie działa, nadal wszystko po lewej stronie.
Stevanicus
Tak, właśnie to sobie uświadomiłem. Dzieje się tak, ponieważ .centerButtons jest elementem blokowym i zajmuje całe miejsce w .nav, przez co właściwości marginesów są bezużyteczne. Próbowałem to naprawić, również pływając .centerButtons, ale bez powodzenia.
Espresso
tak, wiem, że to trudne, denerwuje mnie, bo robiłem to już wcześniej, ale nie pamiętam jak:) .... jakieś pomysły?
Stevanicus
1

Rozważ dodanie tego do swojego CSS, aby rozwiązać problem:

.btn {
  width: 20%;
  margin-left: 40%;
  margin-right: 30%;
}
Israr Awan
źródło
-1

kiedy wszystko inne zawodzi, po prostu

<center> content </center>

Wiem, że to już nie jest „zgodne ze standardami”, ale jeśli działa, to działa

ott
źródło
12
Ta odpowiedź nie dodaje nic do innych odpowiedzi. <center>był przestarzały w HTML4 i nie jest nawet obsługiwany w HTML5, co oznacza, że ​​prawdopodobnie nie zadziała, jeśli zostanie użyty HTML5.
Magnilex
1
Używam go tylko wtedy, gdy nic innego nie działa. Używałem go na stronach, na których jest HTML5, ale wolę tego nie robić. I przeszły i zastąpić, co mogłem z<div align="center">button</div>
Ott
Przestarzały tag, używanie go jest złą praktyką
Sunchock