css水平对齐方式怎么设置

css也就是我们常说的样式表,是进行网页设计必不成少的 。 那么css程度对齐体例怎么设置呢?下面就随我一路进行现实操作吧 。

需要这些哦
演示软件:editplus5
演示浏览器:Edge浏览器
操作系统:win10专业版
方式/
1第一步:我们起首打开网页编纂软件,这里我用editplus5编纂器 。

css水平对齐方式怎么设置

文章插图

2第二步:我们先编写两个div标签以便设置css进行程度体例的样式设置 。
<div id="first" class=""> 第一个div </div>
<div id="second" class="">第二个div  </div>

css水平对齐方式怎么设置

文章插图

3第三步:我们给这两个div标签设置根基的样式,好比宽和高 。
<style type="text/css">
     #first,#second{ width:600px; height:300px;border:5px solid #cc0033;}
</style>

css水平对齐方式怎么设置

文章插图

4第四步:在edge浏览器中进行结果浏览 。

css水平对齐方式怎么设置

文章插图

5第五步:假如我们要把第一个div框在浏览器中程度居中显示 。 设置样式如下:
#first{ margin:0 auto;} margin就是外边距,margin:第一个参数就是上下边距,第二个参数就是程度体例主动,也就是居中的意思 。

css水平对齐方式怎么设置

文章插图

6第六步:此时第一个div标签框已经程度居中了 。 假如我们要给第二个div中的文字进行程度偏向居中的话,就要这样写css,text-align:left/center/right,既文本对齐体例:左/居中/右
#second{ text-align:center;}

css水平对齐方式怎么设置

文章插图

7第七步:此时我们再浏览器中查看文字的程度对齐体例是否居中显示 。

css水平对齐方式怎么设置

文章插图

8总结:
1、起首打开网页设计软件新建一个网页
2、编写两个div标签和写上响应的文字
3、假如要给div结构框设置程度对齐体例,可以经由过程margin属性进行css编写
【css水平对齐方式怎么设置】4、假如要给div标签里面的文字内容设置程度对齐体例,可以经由过程text-align属性进行css样式编写 。

以上内容就是css水平对齐方式怎么设置的内容啦,希望对你有所帮助哦!

    推荐阅读