Wie eine Taste in der Mitte des div-dynamischer Größe

Habe ich diesen code:

<div class="outer">
    <ul class="list">
        <li class="inner">
            <div class="line">information1</div>
            <div class="line">hyperlink1</div>
        </li>
        <li>
            <div class="line">information2</div>
            <div class="line">hyperlink2</div>
        </li>
        <li>
            <div class="line">information3</div>
            <div class="line">hyperlink3</div>
        </li>
        <li>
            <div class="line">information4</div>
            <div class="line">hyperlink4</div>
        </li>
    </ul>
    <input type="submit" id="send" value="send" class="button"/>
</div>

und css:

.outer
{
    display: table;
    border: 1px solid;
    padding: 5px;
}    
.list
{
    list-style: none;
    padding: 5px;
}    
.inner
{
    display: table-row;
    padding: 5px;
}    
.line
{
    display: table-cell;
    border: 1px solid;
    border-radius: 5px;
}    
.button
{
    top:50%; 
    left:50%;
}

Ausgabe: diese

Möchte ich nun platzieren Sie die Schaltfläche in der Mitte des 'äußeren' div, egal welche der Breite.

Beispiel: ich möchte, dass die Schaltfläche in der Mitte auch für: diese. ohne änderung der css-jedes mal, wenn der div-Größe ändert. Auch wenn die 'äußere' div dynamisch ist, sollte der button in der Mitte.

danke.

InformationsquelleAutor s.mujahid8 | 2013-03-19

16

Dadurch wird erreicht, was Sie suchen in einer einfachen, prägnanten, Art:
```
.button {
    display:block;
    margin: 0 auto;
}
```
http://fiddle.jshell.net/mDHBX/2/
- perfekt. vielen Dank.
- Es funktioniert nicht für mich, meine button-Breite ist von 100%.
InformationsquelleAutor Kyuuji
4

Müssen Sie dem button eine bestimmte Breite und dann können Sie die automatische Ränder
```
.button {
  display: block;
  margin: 0 auto;
}
```
http://fiddle.jshell.net/CrHyd/
- diese bricht, wenn der text im button ist zu lang, um fit in 100px
- ya. wenn das Wort sehr lang. es zeigt nicht das Ende Teil.
- Sie brauchen nicht die Breite, das ist wahr. 100px waren nur ein Beispiel, basierend auf dem code, den er gab. Wann war das Letzte mal auf 'Senden' mehr brauchte, dann 100px?
- ya. ich habe nicht genug Ruf zu Stimmen, bis. aber trotzdem danke.
- Sie werden es bekommen!
InformationsquelleAutor Raffael
1

Es gibt mehr als einen Weg, dies zu tun. Ich bevorzuge die Verwendung von Prozentsätzen etwa so:
```
input[type="submit"]{
    min-width:20%;
    max-width:20%;
    margin:0% 39% 0% 40%; //margin-right = 39% to stop errors
}
```
Andere Menschen bevorzugen eine margin:auto Ansatz, aber ich persönlich habe nie gefunden, diese zu arbeiten. Andere Methoden umfassen die Verwendung floats aber ich bin nicht einverstanden mit dieser Eigenschaft, wie es mis richtet andere Elemente, die in einigen Browsern.

Mit top und left wird Fehler verursachen, da hast du nicht angegeben, eine position anderen Typ als Standard (statisch).
- ya. das ist in Ordnung. danke.
InformationsquelleAutor sourRaspberri
0

Sollte diese Arbeit
```
.outer {
display: inline-block;
text-align: center;
}
```
fiddle
- ich wollte, dass es in der Tabelle format und ich wollte, dass die Taste in der Mitte des div. die obigen css legt es in der Mitte der Seite.
- dann wickeln Sie den submit-button in einigen anderen div-Element und wenden Sie diesen Stil, um es mit width:100%; fiddle: fiddle.jshell.net/mDHBX/9
InformationsquelleAutor Pankaj Phartiyal
0

Nur ändern .button unter Verwendung margin Eigenschaft. (1 Zeile fix)
```
.button
{
    margin:0 auto;
}
```
Hier ist ein Turnschuh, wo ich den .outer eine Feste Breite von 500px nur um zu zeigen, ein Beispiel, was margin hat:

DEMO
- danke. seine einfache.
InformationsquelleAutor chriz

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.