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 : centeronを使用するlegendと、凡例全体が中央揃えになります。

代わりに、HTML を次のように変更します。

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

次に、この CSS を使用します。

legend p {
    text-align:center;
}
于 2013-09-18T06:31:22.710 に答える
1

あなたが望むものを正確に視覚化することはできませんが、この独自のを使用していますか?

text-align:center

< span > にテキストを入れて、css から好きな場所に配置することもできます

于 2013-09-18T06:28:44.377 に答える
1

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>

更新されたフィドル

于 2013-09-18T06:25:09.507 に答える