Ankündigung

Einklappen
Keine Ankündigung bisher.

onclick Button zentriert

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    onclick Button zentriert

    Zuletzt geändert von Robert1990; 19.02.2021, 23:38.
    ich bekomme diese Button einfach nicht zentriert (horizontal zum Bildschirm)
    sollte doch mit text-align: center; erledigt sein ?
    HTML-Code:
    <style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 50px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<button class="button" onclick="location.href = 'logout.php';">logout</button>

</body>
</html>
    Stichworte: -
  • #2
    Flexbox ist das Stichwort:
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    HTML-Code:
        body {
        height: 100vh;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    Kommentar

    • #3
      tut sich immer noch nichts bei mir
      es ist ein hover button, vielleicht ist das das Problem ?
      HTML-Code:
      <!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 50px;
  margin: 4px 2px;
  transition-duration: 1s;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

.button:hover {
  background-color: #4CAF50;
  color: white;
}
</style>

</head>

<body>

<button class="button" onclick="location.href = 'logout.php';">logout</button>

</body>
</html>

      Kommentar

      • #4
        habs gefunden
        margin: auto;

        Kommentar

        • #5
          Du müsstest halt schon richtig abschreiben ...

          Mein Beitrag ist ein style für den body, nicht für den Button.

          Kommentar

          • #6
            uuuups.. hab ich übersehen

            Kommentar

            • #7
              Zuletzt geändert von tomBuilder; 20.02.2021, 03:14.
              HTML-Code:
              <button class="button" onclick="location.href = 'logout.php';">logout</button>
              kann man bei solchem nicht einfach:

              HTML-Code:
              <a href="/logout.php"> logout   </a>
<!--
   css stylt den link zum button:
   https://stackoverflow.com/questions/710089/how-do-i-make-an-html-link-look-like-a-button
-->

<!-- oder  -->

<a href="/logout.php"><button class="button" >logout</button></a>

              Kommentar

              • #8
                oje oje, ich versuche mal alles aufzudröseln:

                Zitat von Robert1990 Beitrag anzeigen
                ich bekomme diese Button einfach nicht zentriert (horizontal zum Bildschirm)
                sollte doch mit text-align: center; erledigt sein ?
                Das würde sogar funktionieren wenn du nicht einfach nur rumprobieren würdest statt dich zu informieren was text-align eigentlich macht - dann wüsstest du nämlich dass das Elternelement von button diese Eigenschaft bekommen muss …

                HTML-Code:
                <style>
.button { […]
padding: 16px 32px;
font-size: 50px;
margin: 4px 2px;
}
</style>
                Alles falsch: Pixel ist fast immer die falsche Einheit.

                HTML-Code:
                <button class="button" onclick="location.href = 'logout.php';">logout</button>
                Das ist Käse: mal abgesehen davon dass Javascript im HTML direkt nichts verloren hat (das gehört in externe Dateien) - wie soll sich ein User ohne Javascript abmelden? Das Javascript ist hier völlig unnötig:
                HTML-Code:
                <form action="logout.php">
  <button>Logout</button>
</form>
                macht genau das gleiche. Wobei man darüber streiten kann ob ein Link nicht sinnvoller wäre - ich würde aber wohl den Button vorziehen.

                Zitat von Robert1990 Beitrag anzeigen
                tut sich immer noch nichts bei mir
                Einfach nur blind irgendwas kopieren ohne zu verstehen was flex eigentlich ist, funktioniert (nicht nur hier) nicht. Das du display:flex; auf das falsche Element angewendet hast, ist ja schon geklärt.

                Und warum setzt du die Eigenschaften für .button (was übrigens ein dämlicher Name für eine Klasse ist) eigentlich nicht gleich im ersten Block sondern überschreibst sie z.T. darunter nochmal mit dem Gegenteil?

                Zitat von Robert1990 Beitrag anzeigen
                habs gefunden
                margin: auto;
                Das ist die antike Variante, stimmt - aber warum nicht gleich richtig machen?

                Zitat von tomBuilder Beitrag anzeigen
                HTML-Code:
                <a href="/logout.php"><button class="button" >logout</button></a>
                Das zeigt mal wieder dass man nicht jeden Müll auf SO glauben darf, egal wie er bewertet ist - zumindest nicht ohne die Kommentare zu lesen: die Konstruktion ist nicht erlaubt - entweder <button> oder <a>, aber verschachteln ist nicht erlaubt.

                Kommentar

                • #9
                  war meine idee, SO habe ich nur des a stylings wegen erwähnt.
                  aber danke, wusste ich nicht, hätte mir sicher ein validator um die ohren gehauen tk1234

                  Kommentar

                  Vorherige Weiter
                  Lädt...
                  X