首页

51问答网 > 如何设置文字在网页中的位置

如何设置文字在网页中的位置

2024-12-14 20:53:20

推荐回答（3个）

回答1：

文字显示位置分别为：
水平方向（align），垂直方向（valign）
水平方向即左中右：
left（左对齐）
center（居中）
RIGHT（右对齐）
垂直方向即靠顶和靠底.
top（靠顶）、bottom（靠底）等。
一. 水平方向即左中右的代码：

向左对齐

表示居中

向右对齐

说明:
金钥匙就不显示了, 其实是很明显的, 看文字你就知道具体的方位了!
下面我们用图片做出来的效果代码, 对大家的帮助和学习是实例的意义, 理解起来就清楚得多了;
代码如下:

金钥匙

喜欢你的到来!

朋友
你好!

二. 靠顶和靠底的代码：
垂直方向valign）靠顶的代码：
居左靠顶
居中靠顶
居右靠顶
垂直方向valign）靠底的代码：
居左靠底
居中靠底
居右靠底
文字输出位置垂直方向的代码是设置在一张空表格的单元格里（TD）和(/TD)，方便易用。
实例如下：

居左靠顶的代码
align=LEFT valign=top

居中靠顶的代码
align=center valign=top

居右靠底的代码
align=RIGHT valign=bottom

显示:

居左靠顶的代码

align=LEFT valign=top

居中靠顶的代码

align=center valign=top

居右靠底的代码

align=RIGHT valign=bottom

说明:
◇垂直方向设置必须在表格的单元格里（TD）和(/TD)。
◇本实例在图框内插入一张空表格，分为三横排。
◇根据各行插入内容设置高度。
◇在一张表格中，设置每一行的关键语句。

行的开始标签：

插入内容

行的结束标签：

代码命令注解:
一、字体语法：
　　align=center 字体居中
　　align=right 字体居右
　　align=left 字体居左
　　align=up 字体居上
　　align=down 字体居下
　　... 字体颜色
　　face=华文行楷表示字体
　　文字
　 font:30pt 数值大文字就大
... 最小字体
　　... 最大字体

...

标题字(最大 )
　　

...

标题字(最小)
...　粗体字
　　... 粗体字(强调)
　　... 斜体字　
　　... 斜体字(强调)
... 字体加大
... 移动字体(走马灯)
... 斜体字(表示定义) 　
　　... 底线
　　... 底线(表示插入文字)
　　~~...~~ 横线
　　~~...~~ 删除线
　　~~...~~　删除线(表示删除)
　　... 键盘文字
　　... 打字体
　　...　　...</plaintext> 固定宽度字体(不执行标记符号) <br>　　<listing>...</listing> 固定宽度小字体 <br>　　<font style ="font-size:100px">...</font> 无限增大<br>二、区断标记： <br>　　<hr> 水平线 <br>　　<hr size="9" 水平线(设定大小) <br> <hr width="80%"> 水平线(设定宽度) <br>　　<hr color="ff0000"> 水平线(设定颜色) <br>　　<br> (换行) <br> 空格命令　　<br> <nobr>...</nobr> (不换行) <br>　　<p>...</p>　(段落) <br>　　<center>...</center> 置中 <!>连结格式 <br>　　<base href=地址> (预设好连结路径) <br>　　<a href=地址></a> 外部连结 <br>　　<a href=地址 target="_blank"></a> 外部连结(另开新窗口) <br>　　<a href=地址 target="_top"></a> 外部连结(全窗口连结) <br>　　<a href=地址 target="页框名"></a> 外部连结(在指定页框连结) <br>三、贴图/音乐： <br>　　<img src=图片地址> 贴图 <br>　　<img src=图片地址 width="180"> 设定图片宽度 <br>　　<img src=图片地址 height="30"> 设定图片高度 <br>　　<img src=图片地址 alt="提示文字"> 设定图片提示文字 <br>　　<img src=图片地址 border="1"> 设定图片边框 <br>　　<bgsound src=MID音乐文件地址> 背景音乐设定<br>　　<body background="背景图片地址"> 贴背景<br>　　<body bgcolor="#ff0000"> 设定背景颜色<br>　　<embed src="flash地址" width="宽度" height="高度"> 贴Flash图<br>　　<img dynsrc="影视文件地址" width="宽度" height="高度" start=mouseover> 贴影视<br>　　<iframe src="相关地址" width="宽度" height="高度"></iframe> 贴网页<br>　　<A href="对方网址">写文字文字连接<br>　　<a href="对方网址"><IMG src="图片地址" border=0> 图片连接<br>　　<DIV><FONT face=黑体 color=#ff0000 size=4> <A href="对方网址">文字</DIV> 彩色文字连接<br>　　<P align=center><FONT color=#0066ff face=华文行楷 size=5>插入文字</FONT></P>设定文<br><br>四、滑动语法：<br>　　<marquee>...</marquee>普通滑动 <br>　　<marquee behavior=slide>...</marquee>滑动 <br>　　<marquee behavior=scroll>...</marquee>预设卷动 <br>　　<marquee behavior=alternate>...</marquee>来回滑动 <br>　　<marquee direction=down>...</marquee>向下滑动 <br>　　<marquee direction=up>...</marquee>向上滑动 <br>　　<marquee direction=right></marquee>向右滑动　<br>　　<marquee direction=left></marquee>向左滑动 <br>　　<marquee loop=2>...</marquee>滑动次数 <br>　　<marquee width=180>...</marquee>设定宽度 <br>　　<marquee height=30>...</marquee>设定高度 <br>　　<marquee bgcolor=FF0000>...</marquee>设定背景颜色 <br>　　<marquee scrollamount=2>...</marquee>设定滑动速度数值 <br>　　<marquee scrolldelay=200>...</marquee>设定滑动时间<br> <marquee scrolldelay=300 scrollamount=100>插入文字</marquee>滑动停顿<br> <body background="背景图片地址" body bgproperties=fixed>固定背景不随滚动条滚动<br><br>五．表格语法： <br>　　<table aling=left>...</table>表格位置,置左 <br>　　<TABLE aling=center>...</table>表格位置,置中 <br>　　<table background=图片路径>...</table>背景图片的URL=就是路径网址 <br>　　<table border=边框大小>...</table>设定表格边框大小(使用数字) <br>　　<table bgcolor=颜色码>...</table>设定表格的背景颜色 <br>　　<table borderclor=颜色码>...</table>设定表格边框的颜色<br>　　<table borderclordark=颜色码>...</table>设定表格暗边框的颜色 <br>　　<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色 <br>　　<table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字) <br>　　<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字) <br>　　<table cols=参数>...</table>指定表格的栏数 <br>　　<table frame=参数>...</table>设定表格外框线的显示方式 <br>　　<table width=宽度>...</table>指定表格的宽度大小(使用数字) <br>　　<table height=高度>...</table>指定表格的高度大小(使用数字) <br>　　<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字) <br>　　<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字) <br>　　<!>分割窗口 <br>　　<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整 <br>　　<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整 <br>　　<frameset cols="20%,*">分割左右两个框架 <br>　　<frameset cols="20%,*,20%">分割左中右三个框架 <br>　　<分割上下两个框架 <br>　　<frameset rows="20%,*,20%">分割上中下三个框架 <br>　　<! - - ... - -> 批注 <br>　　<A HREF TARGET> 指定超级链接的分割窗口 <br>　　<A HREF=#锚的名称> 指定锚名称的超级链接 <br>　　<A HREF> 指定超级链接 <br>　　<A 被连结点的名称 <br>　　<ADDRESS>....</ADDRESS> 用来显示电子邮箱地址</p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答2：</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p><p>因为.A1与.A2并没有包含“学生列表”和“编辑窗口”这两个元素，所以你设置的margin-left:400;的位移也就不包括“学生列表”和“编辑窗口”。</p> <p><br></p> <p>你可以使用段落标签来实现整体位移</p> <pre t="code" l="html"><p>学生列表：<br>    <select class="A1"><br>       <option> 张三 </option><br>       <option> 李四 </option><br>    </select><br></p><br><p><br>    编辑窗口：<input type="text" class="A2" /><br></p></pre> <p>然后对p进行css样式设置</p> <pre t="code" l="css"><style><br>    p{margin-top:50px;height:25px;padding:3px;text-align:right;}<br>    p select.A1{width:150px;height:22px;}<br>    p input.A2{width:150px;height:20px;}<br></style></pre> <p>时间有限，代码就帮你改到这，经过测试，是可以得到你想要的结果。<br></p></p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答3：</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p>你框框不是left400吗？那么学生列表这几个字也可以加上css样式控制距离阿。</p> </div> </div> <div class="clear"></div> </div> </div> </div> <div class="wendaright"> <div class="wdluluerwema"> <div class="wdxgwttop">相关问答</div> <div class="wdxgwtnr"> </div> <div class="clear"></div> </div>  <div class="wdluluerwema"> <div class="wdxgwttop">最新问答</div> <div class="wdxgwtnr"> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.51a.net/259197268.html">G2000短袖该穿什么码数？请各位G2000的朋友给个专业的意见，谢谢！</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.51a.net/479948598.html">英语形容词和副词的比较级和最高级的练习题有几个不会想对一下</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.51a.net/568727146368231844.html">形容女人气质高雅的句子</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.51a.net/271884266.html">断路器的模数是什么意思？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.51a.net/282672513.html">诺基亚5233如何用蓝牙上网</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.51a.net/47834004.html">一天1600大卡热量的饮食搭配</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.51a.net/119003841.html">皇冠2.5Royal和奥迪A6L 2.4 哪款性价比更高？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.51a.net/2058998131644305907.html">当易建联老去之后，谁还能扛起中国男篮的大旗呢？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.51a.net/324397747.html">Visual C# 2008 Express Edition 在哪有下载？就是能支持Visual Studio 2008以上版本的，我是新手，不知道</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.51a.net/1797562010934611547.html">看着前男友在你面前和其她女秀恩爱，你什么感受？</a></div> </div> </div> </div> </div> <div class="clear"></div> <div class="footer">  <div class="fanhuitop"><a href="#top" ref="nofollow"><img src="https://www.51a.net/static/old/img/fhtop.png" alt="返回顶部" title="返回顶部"></a></div> <div class="dibu"> <div class="dibu"> </div> </div> <div class="banquan"> <p>内容全部来源于网络收集，如有侵权，请联系网站删除：QQ：24596024</p> </div> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?aa60e2f779ee696abd6a207eac06903d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>