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>
<input class="btn btn-primary" style="text-align:center;display:block;" type="submit" value="{% trans 'ButtonPurpose' %}" />
Rozważ dodanie tego do swojego CSS, aby rozwiązać problem:
button { margin: 0 auto; display: block; }
źródło
Inną fajną opcją jest użycie:
width: 40%; margin-left: 30%; margin-right: 30%
źródło
<Grid item>...</Grid>
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_button
element div.Jeśli chcesz, aby wszystkie twoje przyciski były wyśrodkowane,
nav_buttons
w 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; }
źródło
Rozważ dodanie tego do swojego CSS, aby rozwiązać problem:
.btn { width: 20%; margin-left: 40%; margin-right: 30%; }
źródło
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
źródło
<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.<div align="center">button</div>