div+css中,左边是图片,右边是文字怎么写

html-css014

div+css中,左边是图片,右边是文字怎么写,第1张

用一个div作为主框架,嵌套图片和文字内容两个div,同时使用浮动功能,代码步骤如下:

1.先输入:<div class="header">,建立一个主框架,如下图红框所示;

2.设置框架的样式,根据需要设置即可,如下图红框所示,代码如下:

<style>

.header{

width: 960px                            /*这个div根据你写的替换就行了*/

height: 40px

margin: 5px auto

background-color: white         /*没用你去掉就行*/

}

3.然后嵌套图片:<img src="要放在左边的图片链接">,如下图红框所示;

4.设置图片的样式和位置,根据需求设置即可,如下图红框所示,示例代码如下:

.header img{

height: 40px

float: left

}

5.然后写一个文字内容的div,如下图红框所示,代码如下:<p>设为主页</p></div>;

6.设置文字的位置和样式等,示例代码如下:

.header p{

display: block

width: auto

line-height: 14px

background: url("sethome.png") no-repeat left center  /*你的图标路径*/

padding-left: 20px

}

.header p a{

text-align: left

text-decoration: underline

color: red

font-size: 12px

}

</style>

7.对结果进行预览,如下图所示,图片在左,文字在右。

这样:

body{margin:0padding:0width:100%

height:100%

}div{position:absolutetop:50%left:50%margin-top:-250px margin-left:-250px/*此时宽和高都要固定*/width:500pxheight:500px}body{

margin:0

padding:0

width:100%

height:100%

}

div{

position:absolute

top:50%

left:50%

margin-top:-250px

margin-left:-250px

/*此时宽和高都要固定*/

width:500px

height:500px

}

扩展资料:

注意事项

一、用两个值就可以了

1、text-align:center

//这是让文字左右居中

2、line-height:100px

//这是让文字垂直居中

vertical-align:middle

//这个属性不能让文字垂直居中,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

二、多行文本垂直居中分为两种情况,一个是父级元素高度不固定,随着内容变化;另一个是父级元素高度固定。

1、父级元素高度不固定

父级高度不固定的时,高度只能通过内部文本来撑开。可以通过设置内填充(padding)的值来使文本看起来垂直居中,只需设置padding-top和padding-bottom的值相等:

<!--html代码-->

<divid="div1">

这是多行文本垂直居中,

这是多行文本垂直居中,

这是多行文本垂直居中,

这是多行文本垂直居中。

</div>

/*css代码*/

#div1{

width:300px

margin:50pxauto

border:1pxsolidred

text-align:center/*设置文本水平居中*/

padding:50px20px

}

2、父级元素高度固定

只对拥有valign特性的元素才生效,结合display:table,可以使得div模拟table属性。因此可以设置父级div的display属性:display:table;然后再添加一个div包含文本内容,设置其display:table-cell和vertical-align:middle。

用一个div作为主框架,嵌套图片和文字内容两个div,同时使用浮动功能。图片向左浮动,文字内容向右浮动,这就形成了两栏。右边的文字内容又分为两个div,不需要浮动,它会自动上下排列的。

具体如下:

1、简介C语言是一门通用计算机编程语言,应用广泛。C语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。尽管C语言提供了许多低级处理的功能,但仍然保持着良好跨平台的特性,以一个标准规格写出的C语言程序可在许多电脑平台上进行编译,甚至包含一些嵌入式处理器(单片机或称MCU)以及超级电脑等作业平台。

2、基本介绍

C语言,是一种通用的、过程式的编程语言,广泛用于系统与应用软件的开发。具有高效、灵活、功能丰富、表达力强和较高的移植性等特点,在程序员中备受青睐。最近25年是使用最为广泛的编程语言。

3、运算

C语言的运算非常灵活,功能十分丰富,运算种类远多于其它程序设计语言。在表达式方面较其它程序语言更为简洁,如自加、自减、逗号运算和三目运算使表达式更为简单,但初学者往往会觉的这种表达式难读,关键原因就是对运算符和运算顺序理解不透不全。当多种不同运算组成一个运算表达式,即一个运算式中出现多种运算符时,运算的优先顺序和结合规则显得十分重要。在学习中,对此合理进行分类,找出它们与数学中所学到运算之间的不同点之后,记住这些运算也就不困难了,有些运算符在理解后更会牢记心中,将来用起来得心应手,而有些可暂时放弃不记,等用到时再记不迟。