请使用firefox,chrome等最新浏览器浏览本站。

text-align:justify使用

css3 阿豹 392次浏览 0个评论 扫描二维码

CSS2中text-align有一个属性值为justify,为对齐之意。其主要是用来控制inline水平元素或inline-block元素的对齐与显示的。

实现文字两端对齐(文字内容要超过一行)

text-align:justify;

实现列表两端对齐

        <style>
			.m-list {
				width: 50%;
				border: 1px solid gray;
				margin: 0 auto;
				text-align: justify;
			}
			.child {
				display: inline-block;
				width: 30%;
				height: 100px;
				text-align: center;
				border: 1px solid red;
				font-size: 24px;
				border: 1px solid red;
				*display: inline;
				*zoom: 1;
				vertical-align: top;
			}
        </style>

		<div class="m-list">
			<div class="child">
				子元素
			</div>
			<div class="child">
				子元素
			</div>
			<div class="child">
				子元素
			</div>
			<div class="child">
				子元素
			</div>
			<div class="child">
				子元素
			</div>

		</div>

实现列表最后一行左右对齐

原理:在父元素内部末尾追加一个inline-block元素;使其占满一行。

        <style>
			.m-list {
				width: 50%;
				border: 1px solid gray;
				margin: 0 auto;
				text-align: justify;
			}
			.child {
				display: inline-block;
				width: 30%;
				height: 100px;
				text-align: center;
				border: 1px solid red;
				font-size: 24px;
				border: 1px solid red;
				*display: inline;
				*zoom: 1;
				vertical-align: top;
			}
                       .justify_fix {
                                display: inline-block;
                                width: 100%;
                                height: 0;
                                overflow: hidden;
                                opacity: 0;
                        }
        </style>

		<div class="m-list">
			<div class="child">
				子元素
			</div>
			<div class="child">
				子元素
			</div>
			<div class="child">
				子元素
			</div>
			<div class="child">
				子元素
			</div>
			<div class="child">
				子元素
			</div>
                        <span class="justify_fix"></span>

		</div>

实现列表最后一行左对齐

原理:在父元素内部末尾追加数个inline-block元素使其高度为0,不可见。

        <style>
			.m-list {
				width: 50%;
				border: 1px solid gray;
				margin: 0 auto;
				text-align: justify;
			}
			.child {
				display: inline-block;
				width: 30%;
				height: 100px;
				text-align: center;
				border: 1px solid red;
				font-size: 24px;
				border: 1px solid red;
				*display: inline;
				*zoom: 1;
				vertical-align: top;
			}
                        .left_fix{
				height:0;
				padding:0; 
				overflow:hidden;
				border: none;
				opacity: 0;
                        }
        </style>

		<div class="m-list">
			<div class="child">
				子元素
			</div>
			<div class="child">
				子元素
			</div>
			<div class="child">
				子元素
			</div>
			<div class="child">
				子元素
			</div>
			<div class="child">
				子元素
			</div>
                        <span class="child left_fix"> </span>
			<span class="child left_fix"> </span>
                        <span class="child left_fix"> </span>

		</div>
    

查看demo


转载请注明text-align:justify使用
喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到