as asked many times before (but never really answered) I want to center a legend in a fieldset.
The trick was done perfectly here, which I also bought for my project: http://themeforest.net/item/aloma-liquid-mobile-template/full_screen_preview/5819068
the code from the css reads like this
fieldset {
display: block;
margin: 20px 1%;
margin-bottom: 20px;
padding: 0 auto;
padding: 15px 0;
border: 0;
border-top: 1px solid #DDD;
width: 98%;
}
legend {
display: table;
min-width: 0px;
max-width: 70%;
position: relative;
margin: auto;
padding: 5px 20px;
color: #eee8aa;
font-size: 20px;
text-align: center;
}
But when I try to redo it in another page in my project, that doesn't use the theme, I fail. Am I missing something in the code above?
The theme uses the code <legend align="center">
which fixes the Firefox issue:
http://jsfiddle.net/ncv8H/
<legend align="center">legend</legend>
In HTML 5, the legend align attribute has been depreciated so here is how I did it.
Note that Bootstrap 4 (don't know about 3) completely hides a field set border and sets the legend width to 100%. So in addition to adding the width:auto, you would also have to use css to set the fieldset border if you want it to display.
legend {
width: auto;
margin-left: auto;
margin-right: auto;
}
for
<legend>Legend</legend>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With