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>

css button center

— Stevanicus
źródło

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