Text im Button ausrichten

chpo7234 · #1 (**permalink**) 23.02.2016, 07:07

Hallo Leute,

ich habe meine Buttons mit einem Bild und Text verziert:
http://www2.pic-upload.de/img/29825378/Unbenannt.png

Was mich allerdings stört ist, dass der Button-Text unten angeordnet ist, und nicht wie die Bilder, mittig ist.

HTML-Snippet:

HTML-Code:

<form action="discoveries.php">
  <button type="submit" class="menu_button">
    <img src="http://xhtmlforum.de/images/disk.png">
    <p class="menutext"> Discoveries</p>
  </button>
</form>

Da sich bei der Ausrichtung immer der gesamte Button statt nur der Text verschoben hat, habe ich den Text erstmal in einen Absatz <p> mit einer weiteren Klasse (menutext) getan.

CSS:

PHP-Code:


			
.menu_button {
  height: 23px;
  color: #FFF;
  border: medium none;
  background: url("../images/contextlink_lo.png") no-repeat scroll center;
  float: left;
  font-size: 9pt;
  border-radius: 0px;
  text-decoration: none;
  font-family: arial,helvetica,sans-serif;
  font-weight: bold;
  display: block;
  width: 160px;
  margin-top: 8pt;
}

.menutext{
  display: inline;
}

An dieser Stelle habe ich für die Klasse .menutext alles mit padding und margin probiert. Ich kriege es aber einfach nicht hin, dass der Button-Text mittig steht und nicht unten angeordnet ist.

Hat da jemand einen Tipp parat?

cloned · #2 (**permalink**) 23.02.2016, 07:22

Du brauchst das p-Element und das Bild hier nicht, es reicht folgendes markup:

Code:

<button> Das ist der Text </button>

Dann einfach das Bild per background-image platzieren.
Wieso verwendest du eigentlich fixe Werte für die Breite und Höhe des Buttons?

chpo7234 · #3 (**permalink**) 23.02.2016, 09:56

Danke für deine Antwort, cloned!

Wieso sollte die Button-Größe nicht fix sein? Sollen doch alle Menü-Buttons gleich groß aussehen :- ) ??

cloned · #4 (**permalink**) 23.02.2016, 10:22

Ich fragte, warum du fixe Werte angibst, nicht, dass du Werte generell angibst. Die Höhe orientiert sich doch an der Schriftgröße -> Die ist in jedem Button doch hoffentlich gleich, also wieso Höhe angeben?
Und wieso die Breite in fixen Werten angeben und nicht mit zB Prozentwerten? Bzw. mit flexbox aufbauen, dann musst du, falls sich die Anzahl mal ändert, die Prozentwerte nicht anpassen?

Hintergrund für diese Sache ist: Mit deinen fixen Werten schaut es bestimmt super-gut auf deiner Auflösung aus, aber heutzutage verwenden viele Leute smartphones, tablets, etc, da passen deine Pixelwerte dann gleich nicht mehr.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Wrapper wächst nicht mit, keine Floats	maclady	CSS	11	10.02.2010 17:30
Wachsende Container	Andy CD	CSS	13	10.02.2010 13:08
DIV bis GANZ unten	burnZ	CSS	5	27.07.2008 13:14
Helft mir. Ich habe voll die Leseschwäche	nick	CSS	12	15.01.2008 20:52
Problem mit div und Höhe	deep4	CSS	2	13.11.2007 20:03