超强界面布局之左右空出指定宽度居中

最新推荐文章于 2021-01-20 23:35:51 发布

milijiangjun

最新推荐文章于 2021-01-20 23:35:51 发布

阅读量192

点赞数

分类专栏： # html5

本文链接：https://blog.csdn.net/milijiangjun/article/details/108220166

版权

html5 专栏收录该内容

232 篇文章 4 订阅

订阅专栏

今天根据工作需要需要做个div让他居中。本来没什么
但是随后的需求就难搞了。需要进行左边和右边空出相同宽度的地方例如： 100px
哎，搞起
根据以前的方式来个div 直接样式center 就可以了。但是这个距离左边和右边的宽度。。。。就不好搞了。
于是调整思路进行了一下的方式，先看效果和代码在进行分析
在这里插入图片描述在看代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>超强界面布局之左右空出指定宽度居中</title>
	<style type="text/css">
	.Show{
       
         margin: 0 100px 0 100px;
         border :1px solid red;
    }
    .Show{
       
    }
     .ShwoCont{width: 100%;height: 100%; min-height: 780px;}
	</style>
</head>
<body>
	 <div class="Show"  >
        <div class="ShwoCont" >
             <div id="Scontent"    >this content</div>
    <div id="Sfoot" >this foot</div>
        </div>
    </div>
</body>
</html>