Text mittig von Grafik setzen

davidos_no.1

Ich habe eine Grafik, die 16px mal 16px groß ist. Dahinter steht ein Text in Größe 11px. Wie schaffe ich es, dass der Text jetzt mittig (vertikal gesehen) mittig von den Grafik steht?

Gruß

threadi

Setz die Grafik auf "display: inline;", nimm KEIN float für diese, leg einen Absatz um Text und Bild und definiere für den Text "vertical-align: middle;". Müsste theoretisch reichen.

jojo87

wie wärs damit, den Text in eine Box zu setzen, dieser die Grafik als Hintergrund zuzuweisen und noch text-align: center zu setzen?

davidos_no.1

Zitat von jojo87

wie wärs damit, den Text in eine Box zu setzen, dieser die Grafik als Hintergrund zuzuweisen und noch text-align: center zu setzen?

Die Variante hat mir am Besten gefallen! Ich bin immer wieder beeindruckt, wie simpel CSS ist. So simpel, dass man häufig "den Wald vor lauter Bäumen nicht sieht". Danke!

davidos_no.1

Komischerweise, klappt die Variante bei einem anderen Div jetzt nicht.

PHP

<div id="header">
   <form method="get" id="sform" action="<?php bloginfo('home'); ?>/">
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/search.gif" alt="Search:" /> 
      <input type="text" id="q" value="<?php echo wp_specialchars($s, 1); ?>" name="s" size="15" />
   </form>
</div>

Die Style-Angabe sieht so aus

Code

#header {
		width: 100%;
		height: 61px;
		margin: 2.0em 0 6.0em 0;
		padding: 0;
		background: url(images/header.png) left no-repeat;
		text-align: right;
		vertical-align: middle;
	}

Das Suchfeld soll also vertikal in der Mitte stehen, es "klebt" aber oben fest.

driver

versuchs mal mit line-height:16px;

davidos_no.1

Zitat von driver

versuchs mal mit line-height:16px;

Du meinst wohl 61px - Danke, hat geklappt.

Tags