The black magic that aligns within the CSS line

Source: Internet
Author: User
Orange as far as possible to share the actual project in the pit how to fill, of course, just provide ideas, methods a lot of welcome to discuss, there is just the front-end of the new people are not particularly friendly, it doesn't matter, related to the basic knowledge I will correspond to guide, give a link or give hints, we can Google (Baidu )。


When it comes to the alignment of the line, we may think of similar horizontal alignment, vertical alignment summary type of article, since we call Black magic will not be the basis of the alignment tutorial, the basic tutorial article a lot, we must know a variety of ways to achieve alignment

Project background

or the mobile project of Orange's company, the case

Cut more, we only look at the first line of text, is the title of every day, some people say: TMD you kidding me? There is nothing to talk about, who will write it well!

Don't get excited, I certainly don't explain how this layout is implemented, simple examples are easier to explain the problem, continue to look at the initial implementation of the Code,

  OCT  x  I've chosen 6 articles today

As follows

Careful friends look at the problem, can not see also does not matter, we add two auxiliary line!

  OCT  x  I've chosen 6 articles today    

The effect is as follows

OK, I believe we now have a glance at the problem, that is, the previous date is not vertically centered, the reason! It's easy to explain.

All we need to do is change one line of code to answer your questions.

OCT Orange

After the corresponding HTML modification, you get

This reminds me of the primary school English exercise four grid, Haha, the capital letter is indeed in the top of the two lattice, and lower case on the bottom of the example, a separate look at G, very good explanation of the above show it.

Seemingly simple case is so special, happens to be numbers and capital letters, careful will also find the back of the 6 there are problems, a careless, not the center, the design to find you, your face is forced to say I was in accordance with the center of writing Ah, can not solve?

No, we are going to solve this problem, the reality of the project to be more complex, experienced front-end to know the differences between the fonts, individual fonts up and down a special disparity,

Before and after the font is different, but fortunately the vertical direction of the difference is not very large, here I introduced the original font of the project, the middle of the X is actually an SVG here do not repeat. Because you can understand the mind and then come to 100 of the wrong you will be able to solve.

Into the real world of magic, for the case of this case gives two ideas for everyone to choose

Inline-block Magic

A step-by-step explanation, directly on the code that has solved the problem

  OCT  x  6 articles in a blind election today    

The effect is as follows

Great, I only changed the font-size:16px of the words in the back; Solve the problem yes, happy to the designers, compared to rework after the

What fuck? What the heck? Heart of 10,000 grass mud Horse (divine beast) Pentium, look carefully! Stare big eyes .... That's right

This word of the top out of our auxiliary line, the designer will also screen the phone and then contrast the original with the auxiliary line of the OH ~

The solution is fairly simple and requires only

. desc {  margin-top:1px;  /* Add */  font-size:16px;  font-family:fzyouh_512b;}

Only need to add a line, when when the ~


It's a bad thing, why? Clearly aligned Ah! Look carefully, I am serious, did not play everyone, found that our date is less than a pixel (using the Retina screen friends to see the obvious), someone asked a pixel can be adjusted? Clearly tell everyone can, after the article is ready to explain, here do not expand

The first scheme so far, the hands of the trial friends although not my font, you do not have to download, the browser default font, we are talking about the principle, no need to restore my demo, the key is the block element of the upper and lower margin adjustment.

Note: The margin here can be set negative value, if negative value is useless to explore the cause of it, to everyone online project console

I give is negative, is a function of Oh, you can go to play mobile home, remember in the simulator to see (or will be disorderly into porridge), the console a look will know, but more explanation.

Vertical-align Magic

The complete code is as follows

 14 OCT  x   Today 6 

The above code to run the same effect as before a touch here is not one by one charge everyone flow (conscience front .... )

The difference from the previous method is that our inline elements also use the previous span tag. then through vertical-align:1px; To adjust the vertical position up and down. Friends who are unfamiliar with this attribute can go to the documentation for MDN: https://developer.mozilla.org ...

Several syntaxes are as follows

/* keyword values */vertical-align:baseline;vertical-align:sub;vertical-align:super;vertical-align:text-top; 
 
  
   vertical-align:text-bottom;vertical-align:middle;vertical-align:top;vertical-align:bottom;/*
   Values */vertical-align:10em;vertical-align:4px;/* 
  
   
    
    values */vertical-align:20%;/* Global values * * Vertical-align:inherit;vertical-align:initial;vertical-align:unset;
  
   
 
  

The values we use in this unit are actually less, but they are black magic that is vertically aligned to the elements in the line. Don't know that doesn't matter, get new skills quickly

Summarize

Both scenarios are feasible, sometimes do not because of a pixel racking their brains, to find a breakthrough, who will be afraid of the line in the alignment?

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.