首页源码居中代码,网页设计居中代码怎么写

居中代码,网页设计居中代码怎么写

编程之家2024-06-05174次浏览

一、div+css页面居中代码

网页经常需要将div在屏幕中居中显示,以下几个常用的方法,都比较简单。水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法

居中代码,网页设计居中代码怎么写

下面说两种在屏幕正中(水平居中+垂直居中)的方法,放上示范的html代码:

方法一:

div使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可,不一定要都是0。

.main{

text-align:center;/*让div内部文字居中*/

background-color:#fff;

居中代码,网页设计居中代码怎么写

border-radius:20px;

width:300px;

height:350px;

margin:auto;

position:absolute;

top:0;

居中代码,网页设计居中代码怎么写

left:0;

right:0;

bottom:0;

}

效果如图:

方法二:仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。

.main{

text-align:center;

background-color:#fff;

border-radius:20px;

width:300px;

height:350px;

position:absolute;

left:50%;top:50%;

transform:translate(-50%,-50%);

}

方法三:对于水平居中,可以使用最简单的<center>标签,不过已经过时了,用法如下:<p><center>123</center></p>

这个<center>标签就是相对于<p>标签里的文字,可以使其居中。

由于center标签已经过时了,所以正规一点的话还是不建议使用的,可以使用如下的方式代替:<p>123</p>

二、dw中文字居中应该用什么代码

具体操作方法如下:

1、打开DreamWeaer软件,在body标签中间点击一下,调出文字输入框。

2、然后输入div标签。

3、在head标签中,输入style标签。

4、在style标签中添加div的属性设置:width:100px;height:100xp;background-color:red;宽:100px;高:100px;背景色为红色。

5、点击拆分,查看效果

6、然后继续在属性中输入text-align:center;文字水平居中对齐。

7、对于垂直居中对齐,这里运用行高的关系,整个图形的高度为100px;如果字体的行高也设置为100px,那么文字就在中间了。

代码是line-height:100px;

8、最后将文件保存。

9、在浏览器中打开就是这样的。

三、网页文字居中的代码是什么

<!DOCTYPEHTML>

<html>

<head>

<title>html文字居中测试</title>

<metacharset="UTF-8">

<styletype="text/css">

body{background:#ddd;}

div{width:300px;height:180px;margin:10pxauto;color:#fff;font-size:24px;}

.box1{background:#71a879;text-align:center;}

.box2{background:#6a8bbc;line-height:200px;}

.box3{background:#dea46b;text-align:center;line-height:200px;}

</style>

</head>

<body>

<div>html文字水平居中</div>

<div>html文字垂直居中</div>

<div>html文字水平上下居中</div>

</body>

</html>

扩展资料:

html自定义字体样式

一般字体的设置包含:字体,字体大小,字体颜色

html设置字体的话有很多标签去设置

h1,h2,h3,h4,h5,h6标题

采用css属性。用font去设置字体。

font-family规定元素的字体系列。包含:宋体,微软雅黑等这些字体之类的。font-family:Microsoftyahei表示设置字体为微软雅黑

font-weight是设置字体的粗细。包含:lighter(更细),normal(正常),bold(粗体),bolder(更粗)font-weight:bold设置字体为粗体

font-size是字体的尺寸,可以用使用百分比去设置或者像素去设置。如:font-size:18px

color属性是设置字体的颜色。可以采用

color:red;(颜色名称)color:#00ff00;(颜色的十六进制)color:rgb(0,0,255);(颜色的rgb)例子:<styletype="text/css">

.title{font-family:Microsoftyahei;font-size:16px;font-weight:bold;color:#ccc}</style>我是标题

自学java需要多久,java要学多久联想a60如何刷机(如何刷机联想a60)