Anzeige

button zentrieren ohne widht

button zentrieren ohne widht | PSD-Tutorials.de

Erstellt von KasselJulian, 27.06.2013.

  1. KasselJulian

    KasselJulian Dude

    Dabei seit:
    30.08.2010
    Beiträge:
    628
    Geschlecht:
    männlich
    button zentrieren ohne widht
    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 (Text):
    1.  
    2.                     form input[type=submit],
    3.                     form input[type="button"],
    4.                     form input[type="reset"]
    5.                     form button{
    6.                         width:auto;
    7.                         min-width:40%;
    8.                         height:32px;
    9.                         margin:20px auto;
    10.                         line-height:14px;
    11.                         padding:9px 15px;
    12.                         background-color:#617798;
    13.                         border:0;
    14.                         font-size:14px;
    15.                         color:#FFFFFF;
    16.                         text-align:center;
    17.                         vertical-align:middle;
    18.                         -webkit-box-align: center;
    19.                         /* Border-Radius */
    20.                         -webkit-border-radius:5px;
    21.                         -moz-border-radius:5px;
    22.                         border-radius:5px;
    23.                         -khtml-border-radius:5px;
    24.                         -o-border-radius:5px;
    25.                         cursor:pointer;
    26.                         display:block;
    27.                         /* iPad-Button-Reset:*/
    28.                         -webkit-appearance:none;
    29.                     }
    30.  
    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? :)
     
    #1      
  2. Steve007

    Steve007 Noch nicht viel geschrieben

    Dabei seit:
    05.03.2010
    Beiträge:
    25
    Geschlecht:
    männlich
    Kameratyp:
    NIKON D5100
    button zentrieren ohne widht
    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
     
    #2      
  3. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.075
    Geschlecht:
    männlich
    Ort:
    Ö
    button zentrieren ohne widht
    AW: button zentrieren ohne widht

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

    KasselJulian Dude

    Dabei seit:
    30.08.2010
    Beiträge:
    628
    Geschlecht:
    männlich
    button zentrieren ohne widht
    AW: button zentrieren ohne widht

    Hi,
    ist der schon. In einem form-Tag das natürlich auch margin:0 auto zugewiesen bekommen hat
    Hat er schon (siehe Code)?
     
    #4      
  5. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.075
    Geschlecht:
    männlich
    Ort:
    Ö
    button zentrieren ohne widht
    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!
     
    #5      
  6. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    button zentrieren ohne widht
    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.
     
    #6      
  7. KasselJulian

    KasselJulian Dude

    Dabei seit:
    30.08.2010
    Beiträge:
    628
    Geschlecht:
    männlich
    button zentrieren ohne widht
    AW: button zentrieren ohne widht

    Hilft leider nichts.
     
    #7      
  8. lucifer-bw

    lucifer-bw Noch nicht viel geschrieben

    Dabei seit:
    01.12.2004
    Beiträge:
    41
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    Adobe CC
    button zentrieren ohne widht
    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
     
    #8      
  9. KasselJulian

    KasselJulian Dude

    Dabei seit:
    30.08.2010
    Beiträge:
    628
    Geschlecht:
    männlich
    button zentrieren ohne widht
    AW: button zentrieren ohne widht

    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?
     
    Zuletzt bearbeitet: 28.06.2013
    #9      
  10. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    button zentrieren ohne widht
    AW: button zentrieren ohne widht

    Zeig mir mal bitte deinen HTML Teil

    BTW: Ich glaube dein CSS hat nen Fehler:
    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 (Text):
    1.  
    2. <!DOCTYPE html>
    3. <html>
    4. <head>
    5. <style type="text/css">
    6. form {
    7.     height:100px;
    8.     width: 80%;
    9.     display:table-cell;
    10.     border:1px solid black;
    11.     text-align:center;
    12.     vertical-align:middle;
    13.     -webkit-box-align: center;    
    14. }
    15. form input[type=submit], form input[type="button"], form input[type="reset"], form button {
    16.     width:auto;
    17.     min-width:40%;
    18.     height:32px;
    19.     margin:20px auto;
    20.     line-height:14px;
    21.     padding:9px 15px;
    22.     background-color:#617798;
    23.     border:0;
    24.     font-size:14px;
    25.     color:#FFFFFF;
    26.     text-align:center;
    27.     vertical-align:middle;
    28.     -webkit-box-align: center;
    29.     /* Border-Radius */
    30.     -webkit-border-radius:5px;
    31.     -moz-border-radius:5px;
    32.     border-radius:5px;
    33.     -khtml-border-radius:5px;
    34.     -o-border-radius:5px;
    35.     cursor:pointer;
    36.     display:inline;
    37.     /* iPad-Button-Reset:*/
    38.     -webkit-appearance:none;
    39. }
    40. </style>
    41. </head>
    42. <body>
    43. <div id="wrap">
    44. <h1>Titel Blafasel</h1>
    45.     <form>
    46.         <input type="submit" value="Submit" />
    47.     </form>
    48. </div>
    49. </body>
    50. </html>
    51.  
     
    Zuletzt bearbeitet: 01.07.2013
    #10      
  11. KasselJulian

    KasselJulian Dude

    Dabei seit:
    30.08.2010
    Beiträge:
    628
    Geschlecht:
    männlich
    button zentrieren ohne widht
    AW: button zentrieren ohne widht

    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 (Text):
    1.  
    2. <!doctype html>
    3. <html>
    4. <head>
    5. <meta charset="utf-8">
    6. <title>Unbenanntes Dokument</title>
    7. <style type="text/css">
    8.                 form{
    9.                     width:218px;
    10.                     display:block;
    11.                     margin:0 auto;
    12.                     height:auto;
    13.                     background:green;
    14.                 }
    15.                     form span{
    16.                         display:block;
    17.                     }
    18.                     form input[type=submit],
    19.                     form input[type=button],
    20.                     form input[type=reset],
    21.                     form button{
    22.                         clear:both;
    23.                         width:40%;
    24.                         padding:9px;
    25.                         min-width:40%;
    26.                         height:32px;
    27.                         margin:20px auto;
    28.                         line-height:14px;
    29.                         border:0;
    30.                         text-align:center;
    31.                         vertical-align:middle;
    32.                         -webkit-box-align:center;
    33.                         cursor:pointer;
    34.                         display:block;
    35.                     }
    36. </style>
    37. </head>
    38. <body>
    39. <form name="asd" action="index.php" enctype="multipart/form-data" method="post">
    40.     <span>asdasd</span>
    41.     <input type="text" value="asd">
    42.     <input type="submit" name="submit" value="Daten absenden">
    43. </form>
    44. </body>
    45. </html>
    46.  
    47.  
    // 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 (Text):
    1.  
    2. <!DOCTYPE html>
    3. <html>
    4. <head>
    5. <style type="text/css">
    6. form {
    7.     height:100px;
    8.     width:500px;
    9.     margin:0 auto;
    10.     display:table-cell;
    11.     border:1px solid black;
    12.     text-align:center;
    13.     vertical-align:middle;
    14.     -webkit-box-align: center;    
    15. }
    16. form input[type=submit], form input[type="button"], form input[type="reset"], form button {
    17.     width:auto;
    18.     min-width:40%;
    19.     height:32px;
    20.     margin:20px auto;
    21.     line-height:14px;
    22.     padding:9px 15px;
    23.     background-color:#617798;
    24.     border:0;
    25.     font-size:14px;
    26.     color:#FFFFFF;
    27.     text-align:center;
    28.     vertical-align:middle;
    29.     -webkit-box-align: center;
    30.     /* Border-Radius */
    31.     -webkit-border-radius:5px;
    32.     -moz-border-radius:5px;
    33.     border-radius:5px;
    34.     -khtml-border-radius:5px;
    35.     -o-border-radius:5px;
    36.     cursor:pointer;
    37.     display:inline;
    38.     /* iPad-Button-Reset:*/
    39.     -webkit-appearance:none;
    40. }
    41. </style>
    42. </head>
    43. <body>
    44. <div id="wrap">
    45. <h1>Titel Blafasel</h1>
    46.     <form>
    47.         <input type="submit" value="Submit" />
    48.     </form>
    49. </div>
    50. </body>
    51. </html>
    52.  
     
    Zuletzt bearbeitet: 01.07.2013
    #11      
  12. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    button zentrieren ohne widht
    AW: button zentrieren ohne width

    Dann packst du um dein Formular nen Container und zentrierst den.
    Aber das Hauptproblem ist ja jetzt gelöst ;)
     
    #12      
  13. KasselJulian

    KasselJulian Dude

    Dabei seit:
    30.08.2010
    Beiträge:
    628
    Geschlecht:
    männlich
    button zentrieren ohne widht
    AW: button zentrieren ohne width

    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?
     
    #13      
  14. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    button zentrieren ohne widht
    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.
     
    #14      
  15. KasselJulian

    KasselJulian Dude

    Dabei seit:
    30.08.2010
    Beiträge:
    628
    Geschlecht:
    männlich
    button zentrieren ohne widht
    AW: button zentrieren ohne widht

    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).
     
    Zuletzt bearbeitet: 06.07.2013
    #15      
  16. KasselJulian

    KasselJulian Dude

    Dabei seit:
    30.08.2010
    Beiträge:
    628
    Geschlecht:
    männlich
    button zentrieren ohne widht
    AW: button zentrieren ohne widht

    Wie kann ich das realisieren?
    Die Form ist momentan nicht zentriert!
     
    Zuletzt bearbeitet: 02.07.2013
    #16      
  17. KasselJulian

    KasselJulian Dude

    Dabei seit:
    30.08.2010
    Beiträge:
    628
    Geschlecht:
    männlich
    button zentrieren ohne widht
    AW: button zentrieren ohne widht

    Ich habe leider noch immer keine Lösung gefunden
     
    #17      
  18. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    button zentrieren ohne widht
    #18      
  19. KasselJulian

    KasselJulian Dude

    Dabei seit:
    30.08.2010
    Beiträge:
    628
    Geschlecht:
    männlich
    button zentrieren ohne widht
    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!
     
    #19      
  20. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    button zentrieren ohne widht
    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!
     
    Zuletzt bearbeitet: 06.07.2013
    #20      
x
×
×