📅  最后修改于: 2023-12-03 14:53:01.453000             🧑  作者: Mango
<legend>
将文本标记为中心?当使用HTML <fieldset>
元素结合 <legend>
元素来创建表单时,有时希望将<legend>
中的文本居中显示。可以通过CSS来实现这一效果。
可以通过使用CSS的text-align
属性来实现将<legend>
中的文本标记为中心。
```html
<style>
legend {
text-align: center;
}
</style>
<fieldset>
<legend>文本居中</legend>
<!-- 表单内容 -->
</fieldset>
例如,上述代码将`<legend>`内的文本居中对齐。
### 方法二:使用flexbox布局
另一种方法是使用flexbox布局来对齐`<legend>`中的文本。可以通过以下步骤来实现:
1. 将`<fieldset>`元素的display属性设置为`flex`。
2. 使用`justify-content: center`将文本在水平方向上居中。
3. 使用`align-items: center`将文本在垂直方向上居中。
```markdown
```html
<style>
fieldset {
display: flex;
justify-content: center;
}
legend {
align-items: center;
}
</style>
<fieldset>
<legend>文本居中</legend>
<!-- 表单内容 -->
</fieldset>
上面的代码将使用flexbox将`<legend>`中的文本在水平和垂直方向上居中对齐。
无论是使用CSS属性还是flexbox布局,都可以将`<legend>`中的文本标记为中心对齐。选择适合自己的方法来满足需求。