Knopcentrum CSS

Gebruikelijk probleem met CSS-centrering, werkt alleen niet voor mij, het probleem is dat ik de voltooide breedte px niet ken

Ik heb een div voor de hele navigatie en dan elke knop erin, ze centreren niet meer als er meer dan één knop is. 🙁

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>

Alle hulp wordt zeer op prijs gesteld. Bedankt


Resultaat

Als de breedte onbekend is, heb ik een manier gevonden om de knoppen te centreren, niet helemaal gelukkig maar maakt niet uit, het werkt 😀

De beste manier is om het in een tabel te zetten

<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>

Antwoord 1, autoriteit 100%

Ik realiseer me dat dit een heel oude vraag is, maar ik kwam dit probleem vandaag tegen en ik heb het aan de praat gekregen

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

Gegroet,
Markeer


Antwoord 2, autoriteit 19%

Overweeg om dit aan uw CSS toe te voegen om het probleem op te lossen:

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

Antwoord 3, autoriteit 11%

Een andere leuke optie is om :

. te gebruiken

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

Antwoord 4, autoriteit 5%

Het probleem is met de volgende CSS-regel op .nav_button:

margin: 0 auto;

Dat zou alleen werken als je één knop had, daarom zijn ze niet gecentreerd als er meer dan één nav_buttondivs zijn.

Als je al je knoppen gecentreerd wilt hebben, nest dan de nav_buttonsin een andere 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>

En style het op deze manier:

.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;
}

Antwoord 5

Overweeg om dit aan uw CSS toe te voegen om het probleem op te lossen:

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

Antwoord 6

als al het andere faalt, doe ik gewoon

<center> content </center>

Ik weet dat het niet meer “voldoet aan de normen”, maar als het werkt, werkt het

Other episodes