css - anchor won't center vertically inside list item -


I am trying to put an anchor horizontally in the center and inside a list.

  # menu liu {display: inline-block; Width: 100%; Height: 40px; Padding: 12px 0 12px 0; Text-decoration: None; Color: #AAAAAA; Font-size: 40px; Text-shadow: -2px -2px 0 000, 2px -2px 0 000, -2px 2px 0 000, 2px 2px 0 000;   

Expanded

Edit: Text-aligned is working fine but even vertical-align: mid work Has been doing. Edit 2: As suggested, now I am using an line-height equal to the anchor height, it is actually anchor closer to its vertical center But for some reason it still has some pixels from its real vertical center. Here's an update Bella ...

EDIT 3: Just out of curiosity I defined a 1px solid range for the anchor element and saw that the text inside the anchor was not centered vertically is. Therefore, things like the vertical-alignment or the position change in the anchor in this regard also do not affect some . Can anyone explain this strange behavior?

As mentioned, your markup is invalid Once it is fixed, Do something like this:

Set the width and text alignment of the anchor parents instead of the anchor.

  Lee {Text-line: center; Width: 100%; }   

For vertical alignment and element, you can take different perspectives, possibly giving the element the same height and line-height. In this way it will bring the text to the center vertically.

  & lt; div class = "parent-element" & gt; & Lt; div class = "child-element" & gt; & Lt; P & gt; This is some lesson. & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; . Parent-element {width: 100%; }. Child-element {height: 100px; Line-height: 100px; }   

You can also make it 50% of the top position and then reduce the height of the hair element.

  & lt; div class = "parent element" & gt; & Lt; div class = "child-element" & gt; & Lt; P & gt; This is some lesson. & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; . Parent-element {status: relative; }. Child-element {height: 100px; Margin-top: -50px; Status: Completed; Top: 50%; }    

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -