如何用CSS让文字左对齐,图片居中

html-css092

如何用CSS让文字左对齐,图片居中,第1张

方法如下:

一、行高(line-height)法

如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:

p {

height:30px

line-height:30px

width:100px

overflow:hidden

}

这段代码可以达到效果。

二、内边距(padding)法

另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如:

p {

padding:30px

}

*{

margin:0

padding:0}

先加上这句话,清除浏览器自带的样式造成的冲突,然后就是布局了 ,上面的布局肯定是左右结构,然后右边再分成上下结构:

<div class='wrap'>

<div class='left'></div>

<div class='right'>

<div class='right-top'></div>

<div class='right-bottom'></div>

</div>

</div>

分别插入各个元素(你的图片和字体),关于宽度、高度和浮动样式就自己调咯,不懂在为我就是

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清除右浮动