current position：Home>How to use the box pack attribute and box align attribute inside the box in HTML

How to use the box pack attribute and box align attribute inside the box in HTML

2022-04-29 17:25:36【Billion cloud speed】

html Align the inside of the middle box box-pack Properties and box-align How to use attributes

This article mainly introduces “html Align the inside of the middle box box-pack Properties and box-align How to use attributes ”, In daily operation , I believe a lot of people are html Align the inside of the middle box box-pack Properties and box-align There are doubts about how to use attributes , Xiao Bian consulted all kinds of materials , Sort out simple and easy-to-use operation methods , I hope to answer ”html Align the inside of the middle box box-pack Properties and box-align How to use attributes ” Your doubts help ！ Next , Please follow Xiaobian to learn ！

When elastic elements and inelastic elements are mixed for typesetting , It is possible that the size of all child elements is larger or smaller than the size of the box , Thus, there is insufficient or surplus space in the box . At this time, we need a way to manage the space of the box . If the total size of the child element is less than the size of the box , You can use box-align and box-pack Attribute management .

CSS3 Newly added box-pack Properties and box-align attribute , Used to define the inside of the box element “ Subelement ” The management of surplus space in the horizontal and vertical directions . These alignments , For the text inside the box element 、 Graphics and child elements are valid .

One 、 Horizontal alignment box-pack attribute

box-pack Property can manage the free space of the box horizontally .

Two 、 Vertical objects box-align attribute

box-align Property can manage the free space of the box in the vertical direction .

3、 ... and 、 The practical application

stay CSS2 in , If you want to center the text vertically , It's often set height The property value is equal to line-height Property value , But after learning this section , We just have to let div Element usage box-align attribute （ The default arrangement direction is horizontal）, The text can be centered vertically .

give an example 1： Adaptive Text centering （ Including vertical centering and horizontal centering ）

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title> Box internal alignment box-pack Properties and box-align attribute </title>    <style type="text/css">        div        {            width:200px;            height:160px;            display:-webkit-box;            -webkit-box-align:center;            -webkit-box-pack:center;            background-color:pink;        }    </style></head><body>    <div> Billion speed cloud </div></body></html>

give an example 2： Picture adaptive centering （ Including vertical centering and horizontal centering ）

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title> Box internal alignment box-pack Properties and box-align attribute </title>    <style type="text/css">        #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;        }    </style>    <script src="jquery-1.11.3.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(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");            });        })    </script></head><body>    <div id="control">         Width ：<input id="range_width" type="range" min="160" max="320" value="160"/><span id="value_width">160px</span><br />         Height ：<input id="range_height" type="range" min="100" max="240" value="100"/><span id="value_height">100px</span>    </div>    <div id="view"><img src="../App_images/lesson/run_css3/css3.png" alt=""/></div></body></html>

html Align the inside of the middle box box-pack Properties and box-align How to use attributes

Here we are , About “html Align the inside of the middle box box-pack Properties and box-align How to use attributes ” That's the end of my study , I hope we can solve your doubts . The combination of theory and practice can better help you learn , Let's try ！ If you want to continue to learn more related knowledge , Please continue to pay attention to Yisu cloud website , Xiaobian will continue to strive to bring you more practical articles ！

copyright notice
author[Billion cloud speed],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291539467960.html

The sidebar is recommended

guess what you like

Random recommended