button zentrieren ohne widht

KasselJulian · 27.06.2013

Hi,

ich möchte einen Submit-Button mit variablem Text innerhalb eines <form>-Tags vertikal zentrieren. Im Firefox funktionierts, im Safari gibt da Probleme.
Code:

Code:

                    form input[type=submit],
                    form input[type="button"],
                    form input[type="reset"]
                    form button{
                        width:auto;
                        min-width:40%;
                        height:32px;
                        margin:20px auto;
                        line-height:14px;
                        padding:9px 15px;
                        background-color:#617798;
                        border:0;
                        font-size:14px;
                        color:#FFFFFF;
                        text-align:center;
                        vertical-align:middle;
                        -webkit-box-align: center;
                        /* Border-Radius */
                        -webkit-border-radius:5px;
                        -moz-border-radius:5px;
                        border-radius:5px;
                        -khtml-border-radius:5px;
                        -o-border-radius:5px;
                        cursor:pointer;
                        display:block;
                        /* iPad-Button-Reset:*/
                        -webkit-appearance:none;
                    }

Sobald ich eine klare Breite definiere, ist das Problem gelöst. Kann ich aber ja nicht, da bei zig Formularen der Absende-Button einen verschiedenen Value-Wert haben kann.
Was kann ich tun um den Button trotzdem im Safari zu zentrieren?

Steve007 · 28.06.2013

AW: button zentrieren ohne widht

Vielleicht hilft es, wenn Du den Button in einen separaten DIV-Container packst und diesen dann zentrierst.

Viel Erfolg.

Gruß Steve

Myhar · 28.06.2013

AW: button zentrieren ohne widht

Seperater DIV-Container empfehle ich nicht. Gib dem Button einfach mal eine min-width, vielleicht reicht das ja schon.

KasselJulian · 28.06.2013

AW: button zentrieren ohne widht

Steve007 schrieb:
Vielleicht hilft es, wenn Du den Button in einen separaten DIV-Container packst und diesen dann zentrierst.

Hi,
ist der schon. In einem form-Tag das natürlich auch margin:0 auto zugewiesen bekommen hat

Myhar schrieb:
Seperater DIV-Container empfehle ich nicht. Gib dem Button einfach mal eine min-width, vielleicht reicht das ja schon.

Hat er schon (siehe Code)?

Myhar · 28.06.2013

AW: button zentrieren ohne widht

Verzeih, das habe ich übersehen

Dann fällt mir auf die Schnelle nichts ein. Sollte sich das ändern, geb ich gern Bescheid!

afr0kalypse · 28.06.2013

AW: button zentrieren ohne widht

Nimm mal das display:block raus. Was passiert dann?
vertical-align lässt sich nur auf inline-Elemente anwenden und nicht auf block-Elemente.

KasselJulian · 28.06.2013

AW: button zentrieren ohne widht

afr0kalypse schrieb:
Nimm mal das display:block raus. Was passiert dann?
vertical-align lässt sich nur auf inline-Elemente anwenden und nicht auf block-Elemente.

Hilft leider nichts.

lucifer-bw · 28.06.2013

AW: button zentrieren ohne widht

Willst du den nun eigentlich vertikal oder horizontal zentrieren?

Für die horizontale Zentrierung: align:center auf das Mutterelement anwenden.
Für die vertikale Zentrierung: display:table-cell;vertical-align:middle auf das Mutterelement anwenden.

So müsste es gehen.

Aber hast du denn in dem Formular gar keine weiteren Elemente?? o_O

KasselJulian · 28.06.2013

AW: button zentrieren ohne widht

lucifer-bw schrieb:
Willst du den nun eigentlich vertikal oder horizontal zentrieren?

// Erster Satz!
ich möchte einen Submit-Button mit variablem Text innerhalb eines <form>-Tags vertikal zentrieren.

Dein beschriebener Code hat keine Auswirkung auf das Problem.

Gibt´s noch CSS-Profis?

// Edit:
Es liegt an padding! Sobald padding entfernt ist, wird wieder normal zentriert. Ich kann auf padding aber nicht verzichten. Was also tun um Abstand zum Rand zu halten?

afr0kalypse · 01.07.2013

AW: button zentrieren ohne widht

Zeig mir mal bitte deinen HTML Teil

BTW: Ich glaube dein CSS hat nen Fehler:

form input[type=submit], form input[type="button"], form input[type="reset"] form button

form input[type="reset"], form button
So müsste es richtig sein.
Hier noch etwas Lektüre zum Thema vertical-align und wann man es nutzen kann.
http://phrogz.net/css/vertical-align/

edit: hier ein beispiel wie es geht: du musst das eltern-element zu align beauftragen.

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
form {
    height:100px;
    width: 80%;
    display:table-cell;
    border:1px solid black;
    text-align:center;
    vertical-align:middle;
    -webkit-box-align: center;    
}
form input[type=submit], form input[type="button"], form input[type="reset"], form button {
    width:auto;
    min-width:40%;
    height:32px;
    margin:20px auto;
    line-height:14px;
    padding:9px 15px;
    background-color:#617798;
    border:0;
    font-size:14px;
    color:#FFFFFF;
    text-align:center;
    vertical-align:middle;
    -webkit-box-align: center;
    /* Border-Radius */
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -khtml-border-radius:5px;
    -o-border-radius:5px;
    cursor:pointer;
    display:inline;
    /* iPad-Button-Reset:*/
    -webkit-appearance:none;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Titel Blafasel</h1>
    <form>
        <input type="submit" value="Submit" />
    </form>
</div>
</body>
</html>

KasselJulian · 01.07.2013

AW: button zentrieren ohne widht

afr0kalypse schrieb:
Zeig mir mal bitte deinen HTML Teil

BTW: Ich glaube dein CSS hat nen Fehler

Das hast du richtig erkannt. Der Fehler ist mir schon vor einigen Tagen aufgefallen und habe ihn damals behoben. Er führte aber nicht zur Problemlösung.
Habe hier einen Dummy der dir mein Problem darstellt:

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">
                form{
                    width:218px;
                    display:block;
                    margin:0 auto;
                    height:auto;
                    background:green;
                }
                    form span{
                        display:block;
                    }
                    form input[type=submit],
                    form input[type=button],
                    form input[type=reset],
                    form button{
                        clear:both;
                        width:40%;
                        padding:9px;
                        min-width:40%;
                        height:32px;
                        margin:20px auto;
                        line-height:14px;
                        border:0;
                        text-align:center;
                        vertical-align:middle;
                        -webkit-box-align:center;
                        cursor:pointer;
                        display:block;
                    }
</style>
</head>
<body>
<form name="asd" action="index.php" enctype="multipart/form-data" method="post">
    <span>asdasd</span>
    <input type="text" value="asd">
    <input type="submit" name="submit" value="Daten absenden">
</form> 
</body>
</html>

// EDIT:
Ich habe deinen Code ausprobiert und es funktioniert, bringt jedoch neue Probleme mit sich:
- Jetzt werden auch radio-Buttons zentriert (gut das kann man manuell wider mit text-align:left; hinrichten, aber du weißt ja nie welche tags noch so in ein form-tag hineinkommen)
-Das <form>-Element an sich ist nicht mehr durch margin:0 auto; zentrierbar, hängt mit display:table-cell; zusammen
Anhand deinem Code:

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
form {
    height:100px;
    width:500px;
    margin:0 auto;
    display:table-cell;
    border:1px solid black;
    text-align:center;
    vertical-align:middle;
    -webkit-box-align: center;    
}
form input[type=submit], form input[type="button"], form input[type="reset"], form button {
    width:auto;
    min-width:40%;
    height:32px;
    margin:20px auto;
    line-height:14px;
    padding:9px 15px;
    background-color:#617798;
    border:0;
    font-size:14px;
    color:#FFFFFF;
    text-align:center;
    vertical-align:middle;
    -webkit-box-align: center;
    /* Border-Radius */
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -khtml-border-radius:5px;
    -o-border-radius:5px;
    cursor:pointer;
    display:inline;
    /* iPad-Button-Reset:*/
    -webkit-appearance:none;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Titel Blafasel</h1>
    <form>
        <input type="submit" value="Submit" />
    </form>
</div>
</body>
</html>

afr0kalypse · 01.07.2013

AW: button zentrieren ohne width

KasselJulian schrieb:
-Das <form>-Element an sich ist nicht mehr durch margin:0 auto; zentrierbar, hängt mit display:table-cell; zusammen

Dann packst du um dein Formular nen Container und zentrierst den.
Aber das Hauptproblem ist ja jetzt gelöst

KasselJulian · 01.07.2013

AW: button zentrieren ohne width

afr0kalypse schrieb:
Dann packst du um dein Formular nen Container und zentrierst den.

Sorry das ist für mich nicht wirklich ne Lösung. Wenn ich ein Template für ein Content Management System programmiere kann da variabler Inhalt sein. Das heißt ich kann mich nicht darauf verlassen dass jede Anwendung innerhalb des Templates (die dort includet wird) immer einen Div-Container um das Form-Element zieht. Es muss also eine Lösung geben ohne in den Content einzugreifen (also ohne Container).
Den display-Befehl auf den input-Button anzuwenden hilft nichts.
Weißt du da eine Alternative?

afr0kalypse · 01.07.2013

AW: button zentrieren ohne widht

Die Alternativen habe ich dir genannt, siehe meinen Link im letzten Post.
Wenn das nicht hilft, musst du den Content anpassen.

KasselJulian · 01.07.2013

AW: button zentrieren ohne widht

afr0kalypse schrieb:
Die Alternativen habe ich dir genannt, siehe meinen Link im letzten Post.
Wenn das nicht hilft, musst du den Content anpassen.

Ja, das tut mir jetzt leid aber ich habe gerade gesehen ich habe im ersten Post etwas falsches geschrieben, deshalb nahm ich mir diesen Link auch nicht zu ernst. Ich meine horizontal zentrieren nicht vertikal.
Das Problem ist also noch einmal zusammengefasst, dass ich ohne einen Div-Container oder Tabelle den Submit-Button horizontal zentrieren möchte.

// EDIT:
Ich habe dir das Problem mal in jsfiddle realisiert:
http://jsfiddle.net/FSXz8/1/
Versuche mal ohne Änderungen im HTML mit reinem CSS die grüne Box horizontal in die rote Box zu zentrieren (bzw. die Form in die Seite).

KasselJulian · 02.07.2013

AW: button zentrieren ohne widht

Wie kann ich das realisieren?
Die Form ist momentan nicht zentriert!

KasselJulian · 04.07.2013

AW: button zentrieren ohne widht

Ich habe leider noch immer keine Lösung gefunden

afr0kalypse · 06.07.2013

AW: button zentrieren ohne widht

HTML:

<html>
<head>
<style type="text/css">
form {
    border:1px solid red;
    text-align:center;
}
</style>
</head>
<body>
<div><form><input type="submit" /></form></div>
</body></html>

KasselJulian · 06.07.2013

afr0kalypse schrieb:

HTML:

<html>
<head>
<style type="text/css">
form {
    border:1px solid red;
    text-align:center;
}
</style>
</head>
<body>
<div><form><input type="submit" /></form></div>
</body></html>

Hallo,
bitte guck dir mal meinen oben geposteten Code sowie die Anforderungsbeschreibung an.
Du zentrierst nur den Text innerhalb des Buttons mit text-align:center; und du verwendest einen Wrapper (der Div). Das Ganze soll aber ohne Wrapper funktionieren!

afr0kalypse · 06.07.2013

AW: button zentrieren ohne widht

Du erwartest ganz schön viel und machst selber ganz schön wenig!
Schau dir meinen Codeschnipsel an und passe ihn entsprechend an deine Vorlage an.
Ich zentriere die Elemente innerhalb der Form und nicht einfach nur den Text im Button.
Das Ganze funktioniert auch ohne Div.
Jetzt mach erstmal selber und wenn es bei dir nicht klappt, zeig was von deinem neuen Sourcecode und dann sehen wir weiter.
Gern geschehen!