html - Centrere Link i knap - Udvikleren.dk - Programmering, webdesign og grafik

Tags: css html webdesign

Bruger #16695 @ 14.07.11 12:09

Centrere link i knap

Hej
Hvordan får jeg teksten i den her knap til og stå i midten af boksen, på begge led?

Billede

HTML kode

 <div id="menu">
     <ul>
     <li><a href="index.php">Forside</a></li>
     <li><a href="products.php">Produkter</a></li>
     <li><a href="prices.php">Priser</a></li>
     <li><a href="ref.php">Referencer</a></li>
     <li><a href="contact">Kontakt</a></li>
     </ul>
     </div>
     <!-- Menu slut -->

CSS kode

 #menu a {
     display:inline-block;
     background-color:#1473f6;
     width:117px;
     height:94px;
     
     color: #fff;
     }
     
 #menu li {
     display:inline;
     margin-top:50%;
     
     
     }
 #menu ul {
     float: right;
     
     }

På forhånd tak

6 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #14816 @ 14.07.11 12:46

451

Du kan bruge Text-align til at centrere det, du kan bruge padding til at skubbe teksten længere ned.

CSS kode

 #menu a {
 display:inline-block;
 background-color:#1473f6;
 width:117px;
 height:94px;
 color: #fff;
 
 text-align: center;
 padding-top: 10px;
 }

Håber det hjalp

Bruger #16622 @ 14.07.11 14:16

Hej Mickey,

Jeg tror jeg vil gøre ca. sådan:

CSS kode

 #menu a {
      display:inline-block;
      background-color:#1473f6;
      width:117px;
      color: #fff;
      text-align: center;
      padding: 35px 0;
      }

Det kan være du skal justere de 35px. i padding lidt til.

Bruger #16651 @ 14.07.11 14:26

Jeg ved ikke om det vil fungere, men kan huske tag'en:

CSS kode

 vertical-align: middle;

Bruger #16025 @ 14.07.11 22:42

442

Ved ikke helt om det virker, men prøv

.

Den her

CSS kode

 #menu a {
      display: inline-block;
      background-color: #1473F6;
      width: 117px;
      height: 94px;
      color: #FFFFFF;
      vertical-align: middle;
      margin: 0 auto;
 }

Eller den her

CSS kode

 #menu a {
      display: inline-block;
      background-color: #1473F6;
      width: 117px;
      height: 94px;
      color: #FFFFFF;
      vertical-align: middle;
      text-align: center;
 }

Indlæg senest redigeret d. 14.07.2011 22:42 af Bruger #16025

Bruger #16695 @ 17.07.11 21:07

Hej OG tak for alle jeres svar

Har fundet en løsning så det er bare super

Bruger #16651 @ 18.07.11 07:37

Hej OG tak for alle jeres svar Har fundet en løsning så det er bare super

Husk at afgive stemmer til indlægget der hjalp, eller paste koden der fik det løst til hjælp for andre

Centrere Link i knap

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler