当前位置： 首页 > article >正文

如何指定标签在页面中显示的位置

article 来源：原创 2022/12/16 4:08:34

如何指定标签在页面中显示的位置

在HTML页面设计中常常需要调整标签（元素）的位置，那么，如何指定标签在页面中显示的位置呢？

使用标签的align属性指定标签在页面中显示的位置，如align="left|right|center|justify|char"，特别提示两点：

第一点是align属性有的标签直接支持，有的不直接支持

支持align属性的标签<h1>、<p>、<div>、<table>、<caption>、<legend>、<col>、<colgroup>、<tbody>、<tr>、<th>、<td> 等标签的 align 属性设置，如：

<p align="center">忽如一夜春风来，千树万树梨花开。</p>

对如不直接支持align属性的标签<img>、<textarea>、<select>、<iframe>、<applet>、<embed>、<object>、<fieldset>可以嵌套在支持align属性的标签内，如：

<div align="center"><img src="./雪.png" width="250"/></div>

<div align="center"><input  type="text"  id="output"/> </div>

下面给出示例，演示html网页中如何实现标签（元素）居中效果：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><title> align属性示例</title></head><body><div align="center"><img src="./雪2.png" /></div><p align="center">忽如一夜春风来，千树万树梨花开。</p></body>
</html>

保存文件名：使用align属性居中显示.html，用浏览器打开效果：

 HTML 属性参考手册https://www.w3schools.cn/tags/ref_attributes.asp

第二点是HTML 5 已不支持，应改用 CSS实现。因此对align属性就不再多说了。下面重点介绍使用 CSS实现指定标签在页面中显示的位置。

使用 CSS实现指定标签在页面中显示的位置

CSS 功能较多：CSS 可以用于给文档添加样式，比如改变标题和链接的颜色及大小。也可用于创建布局。甚至还可以用来做一些特效，比如动画。在此我们重点关注

在此我们仅涉及CSS如何设置页面中标签的显示位置

上例可改为

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>用CSS性居中</title>
<style>div{ margin:20px;text-align:center;}
</style>
</head>
<body>  <div ><img src="./雪2.png" /></div><div >忽如一夜春风来，千树万树梨花开。</div>
</body>
</html>

保存文件名：使用CSS性居中显示.html，用浏览器打开效果（和上例一样）：

 

在html中，textarea标签是用来定义一个文本区域（text area）控件（control），也常称为多行文本框，可以通过cols属性和rows属性来设置textarea控件的尺寸大小，使用css的height和width属性来设置更佳。

使用 cols 和 rows 属性设置，如：

<textarea rows="10" cols="30">我是一个文本框。</textarea>

使用 CSS 的 height 和 width 属性设置，如：

<textarea style="width: 200px;height: 100px;">我是一个文本框。</textarea>

若对同一个多行文本框同时设置两者，后者有效。

设置多行文本框的大小示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">#text2 {width: 300px;height: 200px;}</style></head><body><form action="#" method="post">文本域：<br /><br /><textarea id="text1"  rows="10" cols="30" name="description">设置 rows="10" cols="30"大小 </textarea><br /><br /><textarea id="text2"  name="description">使用width属性和height属性设置文本域的宽度为300px，高度为200px。</textarea></form></body>
</html>

保存文件名：多行文本框的大小.html，用浏览器打开效果：

 

修改上面的源码，让textarea标签定义的文本区域（text area）水平居中显示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">div{ margin:20px;text-align:center;}#text2 {width: 300px;height: 200px;}</style></head><body><form action="#" method="post">文本域：<br /><br /><div ><textarea id="text1"  rows="10" cols="30" name="description">设置 rows="10" cols="30"大小 </textarea><br /><br /><textarea id="text2"  name="description">使用width属性和height属性设置文本域的宽度为300px，高度为200px。</textarea></div > </form></body>
</html>

保存文件名：多行文本框的水平居中.html，用浏览器打开效果：

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.dgrt.cn/a/299950.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章：

如何指定标签在页面中显示的位置

如何指定标签在页面中显示的位置 在HTML页面设计中常常需要调整标签&#xff08;元素&#xff09;的位置&#xff0c;那么&#xff0c;如何指定标签在页面中显示的位置呢&#xff1f; 使用标签的align属性指定标签在页面中显示的位置&#xff0c;如align"left|right|cen…...

编程日记 2022/12/16 4:08:34

[附源码]Python计算机毕业设计SSM基于java旅游信息分享网站（程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…...

编程日记 2022/12/16 4:08:01

Kubernetes——Debug Static Pod

1. 问题背景 注意&#xff0c;我这里的Static Pod并非Kubernetes的Static Pod&#xff0c;而是需要把想要Debug的程序放到Delve环境中重新打包一个镜像。因为还有另外一种场景&#xff0c;那就是我们需要不重启Running Pod&#xff0c;为了和这种方式区分&#xff0c;才以此为…...

编程日记 2022/12/16 4:06:43

Docker常用容器命令

常用容器命令 有镜像才能创建容器&#xff0c;这是根本前提(下载一个ubuntu镜像演示) docker pull ubuntu:18.04 新建并启动容器 格式&#xff1a; docker run [OPTIONS] IMAGE [COMMAND] [ARG…] 参数说明&#xff1a; OPTIONS说明&#xff08;常用&#xff09;&#xff1a…...

编程日记 2022/12/16 4:06:07

为什么 char[] 优于 String 的密码？

问&#xff1a; 在 Swing 中&#xff0c;密码字段有一个 getPassword()&#xff08;返回 char[]&#xff09;方法&#xff0c;而不是通常的 getText()&#xff08;返回 String&#xff09;方法。同样&#xff0c;我遇到了一个建议&#xff0c;不要使用 String 来处理密码。 为…...

编程日记 2022/12/16 4:05:31

如何识别网络应用层协议?

能够标识出 Internet上每个流所使用的应用层协议是一系列网络应用的前提和基础。然而随着网络的高速化和协议的复杂化&#xff0c;传统的基于端 口识别应用层协议的算法已经不够准确&#xff0c;因此各种新的协议识别算法成为研究热点 。 本篇文章将重点介绍协议识别问题的几个…...

编程日记 2022/12/16 4:04:57

skynet的actor对等调度分析

skynet的actor对等调度一、actor对等调度二、调度流程源码分析2.1、thread_worker()2.2、struct skynet_context2.3、skynet_context_message_dispatch()2.4、dispatch_message()三、c语言到lua的调用过程分析总结后言一、actor对等调度 actor的调度由线程池来调度。actor是被…...

编程日记 2022/12/16 4:04:23

01背包问题以及有关题目

一、01背包问题详解 确定dp数组以及下标的含义 使用二维数组 dp[i] [j] 表示从下标为[0-i]的物品里任意取&#xff0c;放进容量为j的背包&#xff0c;价值总和最大是多少。 确定递推公式 dp数组的初始化 首先从dp[i][j] 的定义出发&#xff0c;如果背包容量j为0的话&#…...

编程日记 2022/12/16 4:02:24

SSM 学习管理系统

SSM 学习管理系统 SSM 学习管理系统 功能介绍 首页 图片轮播展示 网站公告 学生注册 教师注册 课程资料 视频学习 友情链接 资料详情 学习进度 评论 收藏 后台管理 登录 管理员管理 修改密码 网站公告管理 友情链接管理 轮播图管理 学生管理 班级管理 我的班级管理 教师管理…...

编程日记 2022/12/16 4:01:49

前端按钮/组件权限管理

最近项目中遇到了按钮权限管理的需求&#xff0c;整理了一下目前的方案&#xff0c;有不对的地方望大家指出&#xff5e; 方案1&#xff1a;数组自定义指令 把权限放到数组中&#xff0c;通过vue的自定义指令来判断是否拥有该权限&#xff0c;有则显示&#xff0c;反之则不显…...

编程日记 2022/12/16 4:01:17

Capstone芯片方案设计介绍|CS拓展坞功能说明|CS原厂推荐功能型号

Capstone科技于2018年8月在台湾成立。团队成员的多样性将硅谷和台湾的才华横溢的人联系在一起&#xff0c;以进行协作和取得卓越成就。 Capstone科技是由一个经验丰富的研发团队建立的&#xff0c;该团队专注于研发交付高速接口连接和多媒体应用的竞争解决方案&#xff0c;广泛…...

编程日记 2023/3/29 1:20:57

1 gazebo打不开一直卡在Preparing your world

1 gazebo打不开一直卡在"Preparing your world"1 gazebo打不开一直卡在"Preparing your world"主要问题解决方法1 gazebo打不开一直卡在"Preparing your world" 主要问题 在运行某些程序的功能包的时候&#xff0c;gazebo启动的时候会一直卡在…...

编程日记 2023/3/29 1:17:53

调试错误：Invalid arg tag: environment variable 'TURTLEBOT_GAZEBO_WORLD_FILE' is not set.

调试错误&#xff1a;Invalid tag: environment variable ‘TURTLEBOT_GAZEBO_WORLD_FILE’ is not set. 1.问题描述 在终端输入roslaunch turtlebot_gazebo turtlebot_world.launch时&#xff0c;出现以下错误&#xff1a; ~$ roslaunch turtlebot_gazebo turtlebot_world.…...

编程日记 2023/3/29 1:17:53

Ubuntu 16.04下gazebo7的安装方法

Ubuntu 16.04下gazebo的安装方法 1.卸载当前已安装的不能运行的gazebo相关包 (1)查找当前安装的gazebo包 dpkg -l | grep gazebo(2)卸载 sudo apt-get remove gazebo7 gazebo7-common gazebo7-plugin-base libgazebo7:amd64 libgazebo7-dev:amd642.安装能运行版本gazebo软件…...

编程日记 2023/3/29 1:17:52

让turtlebot动起来并且显示相机拍到的画面

让turtlebot动起来并且显示相机拍到的画面 1.启动仿真环境&#xff0c;在gazebo中显示机器人 打开新的终端输入&#xff1a; roscore打开新的终端输入&#xff1a; roslaunch turtlebot_gazebo turtlebot_world.launch显示如下: 2.用键盘进行控制机器人 2.1 打开新的终端…...

编程日记 2023/3/29 1:17:52

在gazebo中运行turtlebot模拟gmapping过程

在gazebo中运行turtlebot模拟gmapping过程 1.启动Gazebo并加载机器人、环境模型 roslaunch turtlebot_gazebo turtlebot_world.launch2.启动键盘遥控节点 roslaunch turtlebot_teleop keyboard_teleop.launch --screen3.运行gmapping roslaunch turtlebot_gazebo gmapping_…...

编程日记 2023/3/29 1:17:51

gazebo 编辑模拟世界

roslaunch turtlebot_gazebo turtlebot_world.launch world_file:/opt/ros/kinetic/share/turtlebot_gazebo/worlds/corridor.worldecho $TURTLEBOT_GAZEBO_WORLD_FILE 输出&#xff1a; /opt/ros/kinetic/share/turtlebot_gazebo/worlds/playground.world您可以更新它&#xf…...

编程日记 2023/3/29 1:17:50

gazebo+turtlebot教程

gazeboturtlebot教程 编辑模拟世界&#xff1a; http://learn.turtlebot.com/2015/02/03/6/ 编写第一个脚本&#xff1a; http://learn.turtlebot.com/2015/02/03/7/...

编程日记 2023/3/29 1:17:50

gazebo——在gazebo中运行turtlebot机器人模拟gmapping的slam过程

在gazebo中运行turtlebot机器人模拟gmapping的slam过程 https://blog.csdn.net/lingchen2348/article/details/79503970...

编程日记 2023/3/29 1:17:49

gazebo——解决第一次打开gazebo卡的时间特别久问题

解决第一次打开gazebo卡的时间特别久问题 $ cd ~/.gazebo/ $ mkdir -p models $ cd ~/.gazebo/models/ $ wget http://file.ncnynl.com/ros/gazebo_models.txt $ wget -i gazebo_models.txt $ ls model.tar.g* | xargs -n1 tar xzvf...

编程日记 2023/3/29 1:17:49