You are here: Reference > CSS > properties > browser specific extensions > -moz-box-align

-moz-box-align property | -webkit-box-align property

Browser support:
-moz-box-align:
-webkit-box-align:
Specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children.
Only works for box objects. An element is a box object if the display property of the element has the value of -moz-box (-webkit-box) or -moz-inline-box (-webkit-inline-box).
JavaScript page for this property: MozBoxAlign | webkitBoxAlign. You can find other example(s) there.

Possible values:

 One of the following values: 
baseline
This value only applies to horizontally oriented boxes.
center
Extra space is split equally along each side of the child elements, resulting in the children being placed in the center of the box.
end
Child elements are placed on the right or bottom edge of the box.
inherit
Takes the value of this property from the computed style of the parent element.
start
Child elements are aligned starting from the left or top edge of the box.
stretch
The child elements are stretched to fit the size of the box.
Default: stretch.

Example HTML code 1:

This example illustrates the use of the -moz-box-align and the -webkit-box-align properties:
<head>
    <style>
        .alignStart {
            height: 50px;
            border: 5px solid red;

            display: -moz-inline-box;
            display: -webkit-inline-box;
            -moz-box-align: start;
            -webkit-box-align: start;
        }
        .alignEnd {
            height: 50px;
            border: 5px solid red;
            
            display: -moz-inline-box;
            display: -webkit-inline-box;
            -moz-box-align: end;
            -webkit-box-align: end;
        }
    </style>
</head>
<body>
    <div class="alignStart">
        box-align: start
    </div>
    <div class="alignEnd">
        box-align: end
    </div>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content