整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
初学css的新手朋友经常会遇到一个问题，当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么我们怎么才能在css中控制他们在同一行显示呢，其实方法有3种：1、通过添加css的“vertical-align:middle;”；2、如果图片是背景图片，可以在css中设置背景图片，然后设置文字的padding属性；3、把文字和图片分别放入不同的div中。上面三种方法都可以让图片和文字在同一行显示，下面我们用实例来应用一下。
1、在css中给div添加上“vertical-align:middle”属性
我们用“注册、登陆、找回密码”这个在实际运用中经常遇到的情况还做实例，把“注册”和“登陆”做成图片，“找回密码”设置成文字其html代码如下：
使用css的“vertical-align:middle”属性让图片和文字在同一行对齐是一种非常常用的方法，希望大家可以掌握。
2、把图片设置为背景图片
如果我们的图片本身是一个背景图片的话，可以在css中使用“background”来设置该图片，然后设置文字的padding属性就可以使他们在同一行显示了，html代码如下：
我们在css中设置了背景图片，然后又设置了文字的padding-left属性，这样，图片和文字就在同一行显示了，运行结果就不切图了，你可以自己试一下。
3、下面说下最后一种方法，分别把图片和文字放入不同的div中，然后用“margin”属性进行定位，就可以使他们显示在同一行了，html代码如下：
代码如下:
css代码如下：
代码如下:
在浏览器中运行以后，你会发现，这个方法也可以让图片和文字在同一行显示，但是看起来好像麻烦了一点，所以个人还是比较推荐第一种方法的。
学习Java的同学注意了！！！
学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入Java学习交流，裙号码：253772578【长按复制】 我们一起学Java！
们网站中用到最多的就是文字，那么对于文字的样式设置就显得尤为重要。今天我们就来讲一些文字设置相关的css。
<html>
<head>
<title>css</title>
</head>
<body>
<div style="font-family: 'Times New Roman',Times, serif;">字体1</div>
<div style="font-family:Arial,Helvetica,sans-serif;">字体2</div>
<div style="font-style:italic">斜体</div>
<div style="font-size: 50px;">字体大小</div>
<div style="font-weight: bold;">粗体</div>
<div style="font-weight: lighter;">细体</div>
<div style="font-weight: normal;">正常大小</div>
</body>
</html>注：
font-family:用来设置字体，后面可以写多个字体，当第一个不支持的时候会使用第二个；
font-style:指定字体的样式，斜体或正常体；
font-size:设置字体的大小；
font-weight:设置字体的粗细；
<html>
<head>
<title>css</title>
</head>
<body>
<div style="color: red;">颜色1</div>
<div style="color: rgb(155,111,98);">颜色2</div>
</body>
</html>注：字体颜色使用color进行设置，后面可以写对应的颜色的英语；或者使用rgb或rgba来进行设置。
<html>
<head>
<title>css</title>
</head>
<body>
<div style="text-align: left;">左对齐</div>
<div style="text-align: center;">居中对齐</div>
<div style="text-align: right;">右对齐</div>
</body>
</html>注：字体的对齐使用text-align:left；center,right来进行设置。
<html>
<head>
<title>css</title>
</head>
<body>
<div style="line-height: 50px;">行高1</div>
<div style="line-height: 20px;">行高2</div>
<div style="line-height: 5px;">行高3</div>
</body>
</html>注：行高line-height用来设置文本的高度。
全栈攻城狮-每日更新原创IT编程技术及日常实用视频。
主要内容：正式引入HTML网页开发，学习并了解HTML的相关知识。变身Web开发达人，做全栈程序员。这是HTML技术的第二课，主要讲解一下HTML的几大重要标签，做出来比较不错的显示效果。
上节中主要讲解了HTML的开发工具以及书写了第一个Web网页。上节请戳→HTML电脑编程02 书写第一个Web网页 程序员学习复习
第一个HTML网页
其中包括<html>....</html>标签、<head>...</head>（头部标签）、<title>...</title>（标题标签）、<body>...</body>（身体标签）。每个标签都有自己的含义。其实还有很多非常重要的标签的。下面我们一起来看一看。
PS小技巧：分享个写标签的小技巧，在书写（<）时，顺带着把（>）也也写好了。成对成对的写，对于标签也适用，如在写html标签时。书写顺序如下：
1.<
2.>
3.html
4.<
5.>
6./html
对于标签的学习，最好进行分类，这样就可以快速的进行学习了。首先说一下文本标签。
文本标签是用来显示文字的。只要是内容的东西，咋就意味着需要卸载body内：
body标签
如同上节课一样，直接在body标签中写文字也是可行的。但是你无法对字体颜色格式等信息进行控制。所以出现了不同的文本标签，用来显示设置不同的字形。
如同名字一样，标题标签就是标题。使用这个标签可以让你的内容和标题一样显示。标题标签包括<h1>-<h6>六种。
6种标题标签
其显示效果如下：
6种标题标签的展示效果
可以看到H1-H6标签的大小不一致。H后面的数字越大反而越小。
H标签中还包含一个属性align。那到底什么是属性呢？
属性以键值对的形式存在。属性是相对于标签而言的，也就是需要把属性写在标签内。既然是属性，也就意味着可以改变标签的某些功能。例如H标签中含有align属性。这就是用来控制对齐方式的。
align属性
align属性就是用来控制对齐方式的。通过上图，也可以看到属性的书写方式。一起来看一下效果吧：
align属性的不同效果
align属性常用的包括left（靠左）、center（居中）、right（靠右）三个基本值。
下面介绍几个物理字体的标签。物理字体指的是：加粗、斜体、下划线、上下标等
粗体：
粗体
粗体显示的效果
还有其他的标签，和b标签使用方式一致：
各种物理字体
大家直接试用一下就可以看到效果了。
本教程由做全栈攻城狮，原创首发，如有转载，请注明出处。
如果你有什么比较不错的编程技巧，或者你想要什么程序员编程资源，点击下方了解更多。
*请认真填写需求信息，我们会在24小时内与您取得联系。
