使用 CSS 进行水平对齐

2024-01-09

我有以下代码:

<div class="one">
   <p>Test<p><span style="color: Green">▼</span>
</div>

我认为这是一个非常简单的问题,但我不懂CSS。如何使段落在中心水平对齐?


这里有两个问题。

  1. 将包含该段落的 DIV 居中。
  2. 将 DIV 内的段落居中。

为了使 DIV 居中,以下是使用内联样式的代码:

<div style="margin: 0 auto" class="one">
    <p>Test<p>
</div>

上面的代码将使整个 DIV 居中,但不会将文本对齐到中心。同样,只有当类“one”指定了宽度时,div 才会居中。否则没有效果。您还可以在名为“one”的类中包含边距样式信息。

现在,要水平对齐 DIV 中出现的所有文本,您可以像这样设置其样式:

<div style="text-align: center" class="one">
    <p>Test<p>
</div>

如果您只想对单个段落应用居中样式,则可以在<p> tag.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 CSS 进行水平对齐 的相关文章

  • 可以将position:absolute元素设为粘性吗?

    In CSS position sticky使元素能够显示position static行为 即 它采用文档流中的默认位置 直到到达某个滚动位置 然后采用position fixed行为 那么 这是否意味着我们不能使用position st
  • 每 2 行后使 html 表格的边框变厚

    我创建了一个包含一些内容的表 其中有 12 行和 2 列 我想显示边框 但每 4 行之后 我想将水平边框设置为比正常情况更粗 怎么做 请在这里帮忙 试试这个选择器 table tr nth of type 4n td border bott
  • 如何在其他div id的悬停中使用div显示块

    如何打开div悬停时标记href tag 这是我在悬停 href 标签上显示 div 标签的代码 Services is id of href tag Services is id of div tag Service hover Serv
  • CSS 继承、别名和其他很酷的东西

    有一天 我随机浏览网页 发现了一些程序 可以让你编写 CSS 别名和其他很酷的东西 我现在不记得了 举个例子 我记得你可以这样做 myclass background color red greenfont 其中 greenfont 在其他
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • 如何为 HTML 元素创建鼠标拖动滑块?

    我发现的许多滑块插件要么仅单击以查看下一个图像 要么如果它们确实具有鼠标拖动或触摸拖动功能 则仅允许图像 有谁知道为任何 html 元素编写鼠标拖动滑块的插件或可能的方法 我专门使用 SVG 但将来如果能在 div 元素之间滑动就更好了 H
  • Safari 中的 css3 边框半径动画过渡不起作用

    尝试在 Safari 中对图像的边框半径进行 css3 轻松过渡 它只是有点闪烁进入悬停状态 而不是平滑过渡 任何帮助深表感谢 我的代码如下 CSS all a hover img webkit border radius 50 moz b
  • 自定义rc-time-picker的样式

    我在用rc time picker我的项目的包 但我在自定义样式时遇到问题pop up of my time picker成分 这是我的组件的屏幕截图 首先 我需要更改时间的背景颜色item在当时li from light grey 在屏幕
  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope
  • 使用 css 简单地将对象居中,无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • CSS 类命名约定

    在网页上 有两个控件块 主要和次要 大多数人会使用什么类名 选择一 div class primary controls div
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad

随机推荐

  • 如何完全禁用 Django 管理员的身份验证

    我有一个 Django 服务器 使用 PostGis 我想禁用与身份验证相关的所有内容 进入管理员时无需进行身份验证 在管理中隐藏用户 组 在网上搜索后我尝试了以下组合this https stackoverflow com a 40008
  • 如何使用button props动态禁用antd modal的按钮

    我有一个 antd Modal 我正在尝试验证一个字段并为其提供验证 如何根据验证启用 禁用 确定 按钮 如果验证成功 则应启用按钮 否则应禁用按钮
  • 随处使用 Visual Studio 命令提示符工具

    如何使用 VS 命令提示符中包含的工具 Programs MS Visual Studio 2008 Visual Studio Tools Visual Studio 2008 Command Prompt 从任何命令提示符 即不调用vc
  • 自动将产品分配到 WooCommerce 中定义的产品类别

    在 Woocommerce 中 如果产品具有特定的自定义字段值 使用高级自定义字段插件生成此字段 我会尝试自动将给定的产品类别分配给产品 In my functions php我有 function auto add category pr
  • 使用 Visual C++ 将二维数组 int[n][m] 写入 HDF5 文件

    我刚刚开始使用 HDF5 希望得到有关以下内容的一些建议 我有一个二维数组 data 传递到一个方法中 该方法如下所示 void WriteData int data 48 100 int sizes 48 数据的大小实际上不是 48 x
  • CMake 和 XCode:“找不到‘NSObject’的接口声明”

    我正在尝试使用 CMake 生成 XCode 项目 但遇到了一些问题 CMake 生成的项目很好 但后来很明显它没有链接到 Foundation 和 UIKit 框架 我对 CMake 还很陌生 一直在努力克服这个问题 但没有成功 CMak
  • 匹配 IRC 昵称的正则表达式

    如何使用正则表达式来匹配 IRC 昵称 如果这会产生影响的话 这是在 Ruby 中完成的 可能会 使用正则表达式的语法 但谁知道呢 编辑 IRC 昵称可以包含任何字母 数字或以下任何字符 lt If you are testing a si
  • 创建新DataFrame的性能

    我很惊讶timings创建 DataFrames 的这个问题 https stackoverflow com q 41861846 2901002 30000 rows x 2 columns df pd concat pd DataFra
  • 在 Lance Game 中向各个玩家发送“秘密”数据

    我想知道 lance gg 中是否有一种简单的方法可以仅向每个玩家发送特定于玩家的数据 而不是向所有玩家发送所有数据 我希望创建一个扑克游戏 并且不希望每个玩家持有的数据向所有玩家广播 而是只让每个玩家接收有关他们自己的牌的信息 这在当前的
  • 使用 CTE 有哪些优点/缺点?

    我正在考虑提高某些 SQL 的性能 目前 CTE 在脚本中被多次使用和引用 使用表变量我会得到改进吗 不能使用临时表 因为代码位于函数内 您确实必须进行性能测试 没有是 否的答案 根据上面 Andy Living 的帖子链接 CTE 只是查
  • RESTful认证API设计

    我有一个关于 RESTful API 设计的问题 遵循 REST 的准则 所有端点都应该是名词并且是复数形式 并且永远不应该是动词 但是 通常将身份验证路由设置为 login logout 两者都是动词 如果您应该遵守指南 这些路线应该看起
  • JProfiler 错误:IDE 无法找到所选类

    我在 J Profiler 中遇到问题 当我单击 查看源代码 时 出现一些错误 提示 IDE 无法找到所选类并且无法查看源代码 编辑会话设置 选择 应用程序设置 选项卡 选择 Java 文件路径 部分中的 源路径 单选按钮 然后在其中添加源
  • MySQL子查询中的用户变量

    Query Output gt SELECT foo 1 foo SELECT foo SELECT foo FROM SELECT foo AS foo subselect foo 1 foo SELECT foo SELECT foo
  • Vue.js 将 items 中的 item 作为 prop 传递给组件:我会修改 prop 吗?

    Vue js 新手 从文档中 一个简单的示例是使用组件呈现列表中的每一项 如下所示
  • 如何在 tkinter python gui 中查找鼠标点击附近的标签

    我如何识别鼠标点击附近的标签 这里我的定义 识别 应该识别非常接近鼠标点击的标签 from Tkinter import root Tk f Frame root f grid w Canvas f line1 w create line
  • git-svn dcommiting 单个 git 提交

    给定多个未推送git承诺 是否有可能git svn dcommit只有其中一项提交 例如我已经提交了 foo bar 和 baz 但现在我只想让 bar 最终出现在 svn 存储库中 这可能吗 以下假设您的工作正在进行master 首先 重
  • 构建ndk库出错

    我有一个带有本机部分的 Android 项目 现在我试图让 eclipse 编译所有东西 但在本机编译期间它给了我这个错误 sh ndk build all ERROR You are using a non Cygwin compatib
  • 删除数据库文件和 sqllocaldb 后,底层提供程序在打开时失败

    我正在调查我的经历问题在这里 https stackoverflow com questions 13001441 delete mdf file from app data causes exception cannot attach t
  • 如何使用列表视图的 onitemclicklistener 更改仅选定列表视图行的布局

    我需要创建ListView like Samsung Contact List 我需要显示该行的自定义布局 而该行是swiped 并且还需要在该行的背景中显示联系方式 请给我一些想法或参考 谢谢 list setOnItemClickLis
  • 使用 CSS 进行水平对齐

    我有以下代码 div class one p Test p p span style color Green span p div 我认为这是一个非常简单的问题 但我不懂CSS 如何使段落在中心水平对齐 这里有两个问题 将包含该段落的 DI