图例CSS中的中心文字

Question

如何将文字置于图例中心。我希望这个传奇有一个固定的宽度。当我在图例中使用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;

但是我不会为屏幕上的图例设置固定的宽度。以下是它现在的样子 -

Answer 1

使用text-align: center;将图例中的文字居中。

legend {
  text-align: center;
}

Answer 2

使用text-align: center

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>

Updated fiddle

Answer 3

我没有想象你想要什么，但是你使用这个专有：

text-align:center

你也可以把文字放在＆lt; span＆gt;并将它放在你想要的地方css

Answer 4

如果您在text-align : center上使用legend，则会将整个图例居中对齐。

而是将您的HTML更改为：

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

然后使用这个CSS：

legend p {
    text-align:center;
}