In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-21 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Internet Technology >
Share
Shulou(Shulou.com)05/31 Report--
This article mainly introduces "how to use the box-pack attribute and box-align attribute inside the box in html". In the daily operation, it is believed that many people have doubts about how to use the box-pack attribute and box-align attribute inside the box in html. The editor consulted all kinds of materials and sorted out a simple and useful operation method. I hope it will be helpful to answer the question of "how to use the box-pack property and the box-align property inside the box in html"! Next, please follow the editor to study!
When the elastic element is mixed with the inelastic element, it is possible that the size of all child elements is larger or smaller than that of the box, resulting in insufficient or surplus space in the box. There is a need for a way to manage the space of the box. If the total size of the child elements is less than the size of the box, it can be managed using the box-align and box-pack attributes.
The new box-pack attribute and box-align attribute of CSS3 are used to define the management of spare space in the horizontal and vertical directions of the "child elements" within the box element, respectively. These alignments are valid for text, graphics, and child elements within the box element.
Align box-pack attributes horizontally
The box-pack property can manage the spare space of the box horizontally.
2. Vertical object box-align attribute
The box-align property manages the spare space of the box vertically.
III. Practical application
In CSS2, if you want to center the text vertically, you often set the value of the height attribute to the value of the line-height attribute, but in this section, we just let the div element use the box-align attribute (the arrangement direction defaults to horizontal), and the text can be centered vertically.
Example 1: adaptive text centering (including vertical centering and horizontal centering)
Inside the box, align the box-pack property with the box-align property div {width:200px; height:160px; display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center; background-color:pink;}
Example 2: picture adaptive center (including vertical center and horizontal center)
Inside the box, align the box-pack attribute with the box-align attribute # control {margin-bottom:10px;} # view {width:160px; height:100px; display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:center -webkit-box-pack:center; border:1px solid silver;} $(function () {$("# range_width") .change (function () {var num = $(this). Val (); $("# value_width") .text (num + "px")) ("# view"). Css ("width", num + "px");}); $("# range_height") .change (function () {var num = $(this). Val (); $("# value_height") .text (num + "px") $("# view") .css ("height", num + "px");});}) width: 160px height: 100px
At this point, the study on "how to align box-pack properties and box-align properties inside the box in html" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 255
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.