| Article Introduction: CSS attribute value used: Inline-block: The object is presented as an inline object, but the contents of the object are rendered as a block object. The inline objects next to each other are presented in the same line. In this way, the perfect graphics and text centered display is made. Isn't it amazing? The facts tell us that a reasonable use of CSS can achieve some seemingly unlikely effects. |
Work often encounter a graphic effect, such as the figure:
Again common but the effect, for the following text, the general way we handle is centered, but what will be the text more? Some will answer "hide", and others will answer "line change".
For the "line break" approach we will encounter a problem, if the text is centered, the second line will also be centered, which will result in an unfriendly performance effect.
So is there a way to center on the first line of text to achieve the second line of text to display the left?
Please see:
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <meta http-equiv= x-ua-compatible" content= "Ie=emulateie7"/> > <link type= "text/css" href= "Http://wkaifang.com/demo/css/reset.css" rel= "stylesheet" media= "screen"/> <style type= "Text/css" > Demo li{display:inline; float:left; width:100px; text-align:center; margin:10px; demo Li Img{display:block; demo Li Strong{display:inline-block; text-align:left; "Demo Li Strong A{text-align:left;} </ style> </pead> <body onload= "Document.execcommand (" Backgroundimagecache ", False,true)" > <ul class= "Demo" > <li><a href= "#" >≪/a><strong><a href= "#" > I am centered, I am also the left </a></strong></li> <li><a href= "# "></a><strong><a href=" # "> I'm centered </a></strong></li> </ Ul> </body> </ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
CSS is as follows:
. demo li{display:inline; float:left; width:100px; text-align:center; margin:10px;}
. demo Li Img{display:block;
. demo Li Strong{display:inline-block; text-align:left;}
. demo Li Strong a{text-align:left;
HTML is as follows:
<ul>
<li><a href= "#" ></a ><strong><a href= "#" > I am centered, I am also left </a></strong></li>
<li><a href= "#" ></a ><strong><a href= "#" > I was centered </a></strong></li>
</ul>
CSS attribute value used: Inline-block: The object is presented as an inline object, but the contents of the object are rendered as a block object. The inline objects next to each other are presented in the same line. In this way, the perfect graphics and text centered display is made. Isn't it amazing? The facts tell us that a reasonable use of CSS can achieve some seemingly unlikely effects.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
