当前位置：首页 > 行业动态 > 正文

html中写出一行居中加粗字体

居中

实现方法说明

通过组合<div>容器、<strong>或<b>标签实现加粗，配合<center>标签（已废弃）或CSS居中：

html中写出一行居中加粗字体第1张

<div style="text-align: center;">
  <strong>这是居中加粗的文本</strong>
</div>

推荐通过CSS控制样式,更符合现代网页开发规范：

<div class="center-bold">这是居中加粗的文本</div>
<style>
.center-bold {
  text-align: center;
  font-weight: bold;
}
</style>

方法类型	标签组合	CSS属性	兼容性
HTML标签法	`<div>`+`<strong>`	依赖标签默认样式	老旧浏览器支持
CSS样式法	`<div>`+class/style	text-align/font-weight	全平台支持
混合用法	`<div><center><b></center></div>`	混合标签+CSS	不推荐（冗余）

Q1：如何让加粗文字同时显示红色？
A1：在CSS中添加color: red;属性，

.red-bold {
  text-align: center;
  font-weight: bold;
  color: red;
}

Q2：如果文字过长需要自动换行怎么办？
A2：设置容器宽度并添加word-break: break-all;，

<div style="width:200px; text-align:center; word-break:break-all; font-weight:bold;">
  这是一段超长文本会自动换行显示