css 怎么能让一段字向左右对齐吗

html-css017

css 怎么能让一段字向左右对齐吗,第1张

css3的样式属性;display: flexjustify-content: space-between两端对齐。低版本浏览器不支持。

可以用左右浮动实现(float:left&right)。

div+css左对齐分两种情况一种是:文字左对齐;另一种是区域块儿设置浮动,让他们往左浮动,而实现出来的效果即是左对齐;如下演示:

1、文字实现居左对齐

网页中实现效果:如下图

详解:主要属性:text-align:left使文字实现居左对齐   

扩展:text-align:right使文字靠右对齐,center文字居中;

2、区域块儿设置浮动实现居左对齐;div+css如下

网页中效果图:如下

详解:设置一个大的区域nav,里面包含两个部分区域块,nav1与nav2,使他们在nav中靠左浮动;主要标签:float:left靠左浮动;

扩展:float:right靠右浮动;而与之相关标签: clear:both则是去除左右浮动; clear:left去除左浮动 clear:right清除右浮动

有很多种方法可以实现。

随便写几种。

------------------------------

CSS部分:

.text{background-imageurl(pic.jpg)

width: xx px /*你自己定义的宽*/

height: xx px /*你自己定义的高*/

overflow:hidden/*超出部分隐藏*/}

.text span{

margin-top:xx px/*离上边距离*/

margin-left:xx px/*离左边距离*/

}

html部分:

<div class="text"><span>字</span></div>

------------------------------

CSS部分:

.text{background-imageurl(pic.jpg)

width: xx px /*你自己定义的宽*/

height: xx px /*你自己定义的高*/

position:relative/*相对定位*/}

.text span{

position:absolute/*绝对定位*/

top:xx px/*离上边距离*/

left:xx px/*离左边距离*/

}

html部分:

<div class="text"><span>字</span></div>

--------------------------------------

CSS部分:

.text{background-imageurl(pic.jpg)

width: xx px /*注意,这里是你自己定义的宽减去padding-left的值*/

height: xx px /*注意,这里是你你自己定义的高减去padding-top的值*/

padding-top:xx px/*离上边距离*/

padding-left:xx px/*离左边距离*/

}

html部分:

<div class="text">字</div>

lz自己选吧。