• 保存到桌面  加入收藏  设为首页
HTML5

CSS-关于布局居中、对齐经验积累、设置div水平分布

时间:2017-09-19 16:36:08   作者:江节胜   来源:胜行天下   阅读:447   评论:0
一、水平布局:
1、布局使用百分比加左右浮动(两个块级元素实现水平布局)(往下可能需要清除浮动 可能需要加一个div过渡,这个div可能需要设置clear:both,paddin-top值)
2、用使用内联元素也能实现水平布局


二、设置居中:
span 中的text_align仅仅针对文字,设置上下居中 设置相同的height和line-height 
margin:0 auto(好像需要设置父级宽度 设置无效加display: block;) 
div中用align=center(style中用vertical-align:可能无效)

div中用align=center 主要用于设置水平居中,不能设置垂直居中(style中用vertical-align:可能无效) 
div中的子元素也可使用text-align: center;注:
  (父元素需要设置相应宽度;子元素为非块级元素设置display: block,父元素好像不是必须为块级元素)


上下居中 也可以尝试用padding:20px 0;
	补充:
	A:line-height:xxxpx;vertical-align:middle
	B:(高级)display:table-cell;vertical-align:middle
	C:position:absolute;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;
	(absolute 会占用高内存)
	
	
	移动版优先(可能):
	A:
         display:-webkit-box;
         -webkit-box-pack:center;
         -webkit-box-align:center;
	B(高级):
         display:-webkit-flex;
         -webkit-justify-content:center;
         -webkit-align-items:center;

三、div中的span靠左居中
<div style="text-align:left;"><span>abc</span></div>
设置宽无效加上display属性。

四、
处理布局内容溢出(overflow):灵活使用最大最小高度宽度maxHeight、minHeight,移动设备按钮之类布局用图片代替文字。

五、
关于设置div水平分布-float浮动

浮动时最好给每一行的控件设置display: inline-block;①

父级div上也要加float: left;(关键)
(往下可能需要清除浮动 可能需要加一个div过渡,这个div可能需要设置clear:both,paddin-top值)
例子一:
<div style="float: left; height: 50px;background-color: gold;width: 100%;">
		 <div id="" align="center" style="float: left;background-color: red;height: 50px;line-height: 50px;width:20%;">
		 序号序号序号序号序号序号序号
		 </div>
		 <div align="center" style="display:inline-block;background-color: green;float: left; height: 50px;line-height: 50px;width: 80%;">
		内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
		 </div>
</div>

例子二、(关键:父类div设置float: left、设置宽度,子类div设置float: left、设置width比例)
(往下可能需要清除浮动 可能需要加一个div过渡,这个div可能需要设置clear:both,paddin-top值)
	<div style="float: left; width: 90%;margin: 0 5%;">
		<div id="" style="float: left;width: 15%;">
				备&nbsp;注
		</div>
		<div style="float: left;width:85%;">
			<textarea name="" rows="5" style="border-radius: 5px;" placeholder="请输入备注"></textarea>
		</div>
	</div>


六、关于设置父控件中的子控件布局思想
 父相对,子绝对


七、
   有时设置水平方向一排元素,分别为左中右,左边的元素(父级)设置了宽度为比例,左边的元素的子元素设置了一个固定宽度,此时,在小屏幕手机上,中间部分会偏左。
   解决方案,左边的控件(父级)设置min-width等于子元素的固定宽度
   .comment_left {
	width: 10%;
	min-width: 50px;
	float: left;
	background-color: red;
   }

注:
①:display:inline-block 把控件变成内联,block把控件变成块元素

有任何疑问或技术合作都可联系我

微信:yanfahezuo 【推荐】

QQ:596957738


标签:CSS  布局居中  对齐  设置div  水平  分布  
相关评论

加我微信 596957738 (QQ同号)加我微信     QQ联系:596957738    地址:江苏省南京市浦口区

苏ICP备2023050353号

   

苏公网安备32011402010305号

江节胜的Gitee,江节胜的Git地址