1

我怎样才能使图例中的文本居中。我想为图例设置一个固定的宽度。当我使用text-align:center;内部图例时，它将整个图例框移动到中心而不是里面的文本。

 fieldset
    {
        padding: 1px 2px 4px 2px;
        border-radius: 5px;
    }
 legend
    {
        border: 1px solid gray;
        margin-left: 10px;           
        padding:2px;
        width:150px;           
    }

我可以通过删除宽度和使用使文本居中：

padding: 2px 20px 2px 20px;

但是我不会为屏幕中的图例设置固定宽度。这是它现在的样子—— 在此处输入图像描述

4

4 回答 4

3

用于text-align: center;将图例中的文本居中。

legend {
  text-align: center;
}
于 2013-09-18T06:25:03.433 回答
1

我没有准确地想象你想要什么，但你有没有使用这个专有的：

text-align:center

您还可以将文本放在 <span> 中并将其放在 css 中您想要的位置

于 2013-09-18T06:28:44.377 回答
1

使用文本对齐：居中

legend {
        border: 1px solid gray;
        margin-left: 10px;           
        padding:2px;
        width:150px;  
        text-align: center;  //ADD this to center align the text         
    }

检查这个JSFiddle 更新：

既然你提到它正在对齐整个图例，试试这个（虽然在 HTML5 中不支持）

<legend><center>Product Details</center></legend>

更新的小提琴

于 2013-09-18T06:25:09.507 回答
1

如果您使用text-align : centeron legend，它将使整个图例居中对齐。

而是将您的 HTML 更改为：

<legend><p>Product Details</p></legend>

然后使用这个 CSS ：

legend p {
    text-align:center;
}
于 2013-09-18T06:31:22.710 回答