css居中五环两栏布局

CSS居中五环两栏布局，是一种常见的网页布局方式，常用于网站首页、产品展示等页面。其主要特点是五环图片居中显示，左右两栏内容分别在其两侧呈现，整体美观大方。

html,body {
       margin: 0;
       padding: 0;
       height: 100%;
       width: 100%;
}
.container {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100%;
       width: 100%;
       background-color: #f5f5f5;
 }
.left {
       width: 40%;
       margin-left: 10%;
       text-align: center;
       font-size: 18px;
       letter-spacing: 2px;
       line-height: 1.5;
}
.right {
       width: 40%;
       margin-right: 10%;
       text-align: center;
       font-size: 18px;
       letter-spacing: 2px;
       line-height: 1.5;
}
@media (max-width: 768px) {
   .left, .right {
          width: 100%;
          margin: 0 auto;
   }
}
    

该布局以.container作为容器，采用flex布局将五环图片居中，两栏内容在左右两侧分别显示。其中，left和right分别定义为左右两栏样式，通过width和margin控制左右两栏的宽度和间距。在移动端使用@media查询，将左右两栏宽度设为100%并居中显示。

总之，CSS居中五环两栏布局是一种简单实用的网页布局方式，可以轻松实现网页的美观与实用性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！