I am using the following style to align the columns at the center of the page using susy:
card{
@include span(3 of 12);
margin: 0 auto;
cursor: pointer;
}
But its not moving the elements (div) to center of the page by default, if I have single element it is placing it on left side and but I want that single element to be placed at the center of the page. Elements grows dynamically and they are not static.
The span()
mixin generates a float: left;
property, which keeps your item from centering. Use the function instead, to avoid unwanted output:
.card {
width: span(3 of 12);
margin: 0 auto;
cursor: pointer;
}
Update based on clarifying comment...
There are two ways you might be able to center/left-align based on siblings. One uses flexbox:
.container {
display: flex;
justify-content: center;
}
.card {
flex: 0 0 span(3 of 12);
// add gutters to all but the first element
& + & {
margin-left: gutter(of 12);
}
}
The other uses sibling-logic only:
.card {
@include span(3 of 12);
outline: 1px dotted red;
&:first-child:last-child {
float: none;
margin: 0 auto;
}
}
The flexbox solution keeps everything centered until you've filled up the space. The floating solution only centers when there is a single .card
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.