使用display flex将图片居中的方法 | 您所在的位置:网站首页 › img在div上下居中 › 使用display flex将图片居中的方法 |
display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局 注意:(Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。) 1.将图片水平方向居中: justify-content:用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。 图片居中 *{ margin: 0 ; padding: 0; } .test{ width: 500px; height: 500px; margin: 0 auto; border: 2px solid red; display: flex; justify-content: center; } .test2{ width: 50px; height: 50px; }2.将图片垂直方向居中: align-items:属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。 图片居中 *{ margin: 0 ; padding: 0; } .test{ width: 500px; height: 500px; margin: 0 auto; border: 2px solid red; display: flex; align-items: center; } .test2{ width: 50px; height: 50px; }
|
CopyRight 2018-2019 实验室设备网 版权所有 |