текст центра внутри легенды CSS

Как я могу центрировать текст внутри легенды. Я хотел бы иметь фиксированную ширину для легенды. Когда я использую text-align:center; внутри легенды, он перемещает все поле легенды в центр вместо текста внутри.текст центра внутри легенды CSS

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;

но тогда я не имел бы фиксированную ширину для легенд экрана. Вот как это выглядит сейчас: enter image description here

источник

2013-09-18 Ruby

'выравнивания текста: center'? – Vucko

Извините за отсутствие пункта. Я уже пробовал текстовое выравнивание, но он перемещал всю легенду. Ответ @ nikhil исправил это. Всем спасибо . – Ruby

Если вы используете text-align : center на legend, это будет выравнивание по центру всей легенды.

Вместо изменить HTML для:

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

И затем использовать этот CSS:

legend p { 
    text-align:center; 
}

источник

2013-09-18 06:31:22

text-align: center; Чтобы создать текст внутри легенды.

legend { 
    text-align: center; 
}

источник

2013-09-18 06:25:03 q0re

Использование 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

источник

2013-09-18 06:25:09 Praveen

Я не визуализировать то, что вы хотите, но вы используете этот патентованный:

text-align:center

Вы также можете поместить вас текст в < SPAN> и поместить его там, где вы хотите от CSS

источник

2013-09-18 06:28:44

текст центра внутри легенды CSS

ответ

Смежные вопросы