CSS vertausich Text in <a> anchor wenn der Anzeigetyp blockiert

Question

Ich bin mir nicht sicher, ob dies ohne Pseudoelemente möglich ist - aber was weiß ich.

Ich habe ein Tab-Element, das eine <LI> ist.

In jedem LI befindet sich ein <A>.

Ich möchte 2 Dinge erreichen:

1. die Make A-Element den Raum seiner Mutter LI füllen. Die Höhe ist bekannt, aber die Breite ist variabel. vertikal
2. der Text-Center,

Offensichtlich ist dies leicht mit 1 Liner gemacht wird, einfach display:block und line-height auf den Anker hinzuzufügen.

Allerdings muss ich für die Zeilenumbrüche auch zulassen.

Also zur Wiederholung: Füllen Sie den verfügbaren Platz im übergeordneten und vertikal ausrichten Text innerhalb eines eigenen Blocks.

Ich kann flexbox oder was auch immer verwenden, aber im Moment kann ich das eine oder das andere nicht beides.

Answer 1

Ich verwende Flex-Box um die Elemente zu wickeln, die li Elemente eine Höhe von 50 px geben und dann die a Tag eine Zeilenhöhe von 50px.

• Aufgrund der Zeilenhöhe ist der Text vertikal zentriert.
• Aufgrund der Flex-Box wickeln die Elemente Multiline.

ul { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid #c3c3c3; 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
    display: -webkit-flex; /* Safari */ 
 
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */ 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
ul li { 
 
    width: 50px; 
 
    height: 50px; 
 
    position:relative; 
 
    text-align:center; 
 
} 
 

 
ul li a { 
 
    height:100%; 
 
    display:block; 
 
    line-height:50px; 
 
} 
 
ul li a:hover { 
 
    background-color:#333; 
 
    color:white; 
 
}

<ul> 
 
    <li><a href="default.asp">Home</a></li> 
 
    <li><a href="news.asp">News</a></li> 
 
    <li><a href="contact.asp">Contact</a></li> 
 
    <li><a href="about.asp">About</a></li> 
 
    <li><a href="default.asp">Home</a></li> 
 
    <li><a href="news.asp">News</a></li> 
 
    <li><a href="contact.asp">Contact</a></li> 
 
    <li><a href="about.asp">About</a></li> 
 
    <li><a href="default.asp">Home</a></li> 
 
    <li><a href="news.asp">News</a></li> 
 
    <li><a href="contact.asp">Contact</a></li> 
 
    <li><a href="about.asp">About</a></li> 
 
    <li><a href="default.asp">Home</a></li> 
 
    <li><a href="news.asp">News</a></li> 
 
    <li><a href="contact.asp">Contact</a></li> 
 
    <li><a href="about.asp">About</a></li> 
 
</ul>