Wie vertikal-center-Anker-Tags text innerhalb eines ul li

Hier ist mein html:

<ul id="sub_nav" class="block_hide trim no_list no_line" style="display: block; left: 524.5px;">
<li><a href="/path1" class="one">1st button</a></li>
<li><a href="/path2" class="one">2nd button</a></li>
<li><a href="/path3" class="one">3rd button</a></li>
</ul>

Ich auch an einem Bild, wenn das, was ich derzeit habe. Ich habe versucht, das hinzufügen display: table-cell;
vertical-align: middle; der anchor-tag Klasse aber es hat nicht funktioniert ich habe auch versucht, das hinzufügen einer Spannweite um den Anker-tag mit einer Klasse mit: display: table-cell; vertical-align: middle; aber das hat nicht funktioniert entweder, in beiden Fällen Schaltfläche Höhen waren nicht konstant.

Wie kann ich vertikal text zentrieren und halten meine Knöpfe, Sie Höhe und Breite die gleichen?

Landete mit display:table-cell Lösung wie es die meisten cross-browser....Ich wusste nicht, wie es auf den ersten, weil ich musste einen hard-code die Breite von meinem "button" statt 100%, aber nachdem ich Vergangenheit, dass es eine solide Lösung:
meine li:

.header #sub_nav li {
    display: table;
    float: left;
    font-size: 11px;
    line-height: 12px;
    margin-bottom: 12px;
    margin-left: 12px;
    width: 86%;
}

meine:

    .header #sub_nav li a {
    display: table-cell;
    height: 45px;
    vertical-align: middle;
    width: 111px;
}

bitte zeigen Sie den css-code oder URL geben
Dein code entspricht nicht deinem Bild - es ist nutzlos. Würde es helfen, wenn Sie das einrichten könnten, eine realistische jsfiddle.

InformationsquelleAutor Mike6679 | 2012-12-20

6

Ich Tun etwas ähnliches, was Sie gefragt haben. Definieren Sie die übergeordneten wie "display: table" und das element selbst mit "vertical-align:middle" & "display:table-cell" für mich gearbeitet.

Es ändert sich die Höhe meiner Tasten

InformationsquelleAutor ggcodes
4

Wenn Sie nur ein Element innerhalb des li (oder div, etc), der einfachste Weg ist, um line-height auf die gleiche wie das element in der Höhe, und es wird vertikal ausgerichtet sein. Ich habe einen einfachen fiddle unten, und ich hoffe, das hilft!
http://jsfiddle.net/fCkLJ/
```
li {
  /* other styling */
  height: 30px;
  line-height: 30px; 
}
```
ja wird nicht funktionieren, da ich mehrere Linien
funktioniert gut für einzelne Werbebuchungen

InformationsquelleAutor Dan Tang
1

Versuchen:
```
li{
padding-top:20%;
padding-bottom:20%;
}
```
Dadurch wird auch padding-top/bottom auf dem LI, aber wenn ein LI-wraps, und ein weiterer, nicht wahr, Sie werden verschiedenen Höhen.

http://jsfiddle.net/VMCH6/1/

Nicht sicher, wie Sie cross-browser-es ist... gut in der moderne.
Danke, aber es bewirkt, dass die Schaltflächen zu den verschiedenen Höhen, die ich versuche zu vermeiden.

InformationsquelleAutor deach
0

Gibt es viele Möglichkeiten, hier sieht

diese Lösung verwendet die Tabelle Methode, die ich erwähnt hatte, funktionierte nicht für mich.

InformationsquelleAutor Damonsson
0

Wenn Sie background-image, dann sollten Sie eine Feste Breite-Höhe für das li.a element, und verwenden Sie diesen hack für das a-element:
```
li a {
    height: 50px;
    width: 300px;
    margin: auto 0;
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
}
```
Dies ist die Beispiel arbeiten (auch mit Ihrem Bild als hintergrund). Die Schaltfläche "abschließen" wird anklickbar, und die Flexibilität, um mehrere Zeilen:

http://jsfiddle.net/GqBAL/494/

Hinweis: ist Das nicht 100% cross-browser, aber ist die beste Lösung.

Wird das vertikal ausrichten? Weil ich nicht möchte, horizontal align. Die IE-Browser funktioniert es?
Überprüfen Sie die fiddle link mit verschiedenen Browsern und dem IE zu überprüfen. Was meinst du mit "ich will nicht horizontal ausrichten"?
Ich meinte ich will nicht die horizontale Zentrierung.
Sie können Steuern, die mit margin / padding dieses Beispiel ist nicht horizontal zentrieren
Diese def funktioniert in Chrome (webkit-basierten Browsern), aber noch nicht getestet auf anderen Browsern noch...danke Tom!

InformationsquelleAutor Tom Sarduy

-1

Habe ich nicht genug Kenntnisse in HTML/CSS, aber ich denke, es ist Ok .

in dieser Antwort, die ich entfernt haben, die Höhe von UL/LI zur Verfügung gestellt und auto-Höhe , und in der Anker - <a> tag habe ich genutzt, die Polsterung , die Anzeige eines bigger-height-centralized - Taste .

CSS-Teil ist :

<style>
html , body , ul , li 
{
    margin:0;
    padding:0;
}
html , body
{
    width:100%;
    height:100%;
}
ul
{
    width:100%;
    height:auto;    
    background-color:red;
}
li
{
    width:33%;
    height:auto;    
    display:inline-block;
    background-color:green; 
}
a
{
    width:100%;
    height:100%;
    text-align:center;
    display:block;
    padding-top:10%;
    padding-bottom:10%;
}
</style>

HTML-Teil ist :

<body>
<ul>
<li><a href="">tushar</a></li>
<li><a href="">tushar</a></li>
<li><a href="">tushar</a></li>
</ul>
</body>

InformationsquelleAutor Tushar Pandey

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.