html - FieldSetを中央に配置しようとしています

Question

div内のfieldSetに問題があります。最初の2つは隣り合って中央に配置されていますが、3つ目は左揃えで配置されており、divの中央に配置できないようです。

JSP

<tr>
<th>
<span onclick="toggleDiv('rollupGranularity', 'rollImg')" style="cursor: hand;">Data Structure&nbsp;<img name="rollImg" src="../images/minus.gif" /></span>
</th>
</tr>

<tr>
<td>
<div class="det" id="rollupGranularity" style="text-align: center;">

<table class="det">
<tr>
<td>
<fieldset class="det">
    <legend>Rollup Level</legend>
    <input type="radio" class="filterBoxes" id="groupLevel1" name="groupLevel" value="1" <c:if test="${form.groupLevel == '1'}">checked="checked"</c:if>>SOR</input>
    <input type="radio" class="filterBoxes" id="groupLevel2" name="groupLevel" value="2" <c:if test="${form.groupLevel == '2'}">checked="checked"</c:if>>Commodity</input>
    <input type="radio" class="filterBoxes" id="groupLevel4" name="groupLevel" value="4" <c:if test="${form.groupLevel == '4'}">checked="checked"</c:if>>TAMCN</input>
    <input type="radio" class="filterBoxes" id="groupLevel5" name="groupLevel" value="5" <c:if test="${form.groupLevel == '5'}">checked="checked"</c:if>>NSN</input>
    <input type="radio" class="filterBoxes" id="groupLevel6" name="groupLevel" value="6" <c:if test="${form.groupLevel == '6' || empty form.groupLevel}">checked="checked"</c:if>>MWSLIN</input>
    <input type="radio" class="filterBoxes" id="groupLevel7" name="groupLevel" value="7" <c:if test="${form.groupLevel == '7'}">checked="checked"</c:if>>Planned Unit</input>
    <input type="radio" class="filterBoxes" id="groupLevel8" name="groupLevel" value="8" <c:if test="${form.groupLevel == '8'}">checked="checked"</c:if>>Actual Unit</input>

    </fieldset>
  <fieldset class="det">
    <legend>Granularity</legend>
    <input type="radio" class="filterBoxes" id="granularity1" name="granularity" onclick="javascript:updateOutYearsSelect();" value="1" <c:if test="${form.granularity == '1'}">checked="checked"</c:if>>Workload Year</input>
    <input type="radio" class="filterBoxes" id="granularity2" name="granularity" onclick="javascript:updateOutYearsSelect();" value="2" <c:if test="${form.granularity == '2'}">checked="checked"</c:if>>Quarter</input>
    <input type="radio" class="filterBoxes" id="granularity4" name="granularity" onclick="javascript:updateOutYearsSelect();" value="4" <c:if test="${form.granularity == '4' || empty form.granularity}">checked="checked"</c:if>>Month</input>
    &nbsp;&nbsp;Out years:&nbsp;
    <select id="outYears" name="outYears" class="filterSelect">
        <option value="0" <c:if test="${form.outYears == '0'}">selected</c:if>>None</option>
        <option value="1" <c:if test="${form.outYears == '1' || empty form.outYears}">selected</c:if>>One</option>
        <option value="2" <c:if test="${form.outYears == '2'}">selected</c:if>>Two</option>
    </select>
</fieldset>

</td>
</tr>
</table>

<fieldset class="det" style="align:center;">
<legend>Additional Breakout</legend>
<table class="det" style="text-align:left;" width="98%">
<tr>
    <c:forEach var="field" items="${groupingFields}" varStatus="status">
        <c:set var="mapKey" value="grp_${field.fieldName}"/>
        <c:if test="${status.index%7==0 && !status.first}"></tr><tr></c:if>
        <td style="padding-top=0; padding-bottom=0; padding-right: 2px; margin-top=0; margin-bottom=0; margin-right: 2px;">
            <span class="mouseover_text" style="color: #000000;" title="${field.description}"><input type="checkbox" class="filterBoxes" id="grp_${field.fieldName}" name="groupingFieldNames" value="${field.fieldName}" <c:if test="${preselectionMap[mapKey]}">checked="checked"</c:if>>${field.displayName}</input></span>
        </td>
    </c:forEach>
</tr>
</table>
</fieldset>

</div>
</td>
</tr>

CSS：

/*styling for Data Extraction tool. */
table.data_extract
{

 border: 3px DarkGray solid;
 border-collapse: collapse;

}

td.data_extract,
table.data_extract > tbody > tr > td
 {
border-color : DarkGray;
border-style : groove;
border-width : thin;
border: #000000 1px solid;
font-size: 9pt;
white-space: normal;
background-color:#FFFFFF;
padding-left: 4px;
padding-right: 4px;
overflow:hidden;
 } 

 th.data_extract,
 table.data_extract > tbody > tr > th
 {
 border: #000000 1px solid;
 background-color:#DDDDD0;
 font-size: 10pt;
 white-space: normal;
 padding: 10px;
 }

table.det
{
background-color: #FFFFDD;
border-collapse: collapse;
margin: auto;
}
table.det > tbody > tr > td
{ 
border: none; 
background-color: #FFFFDD;
}
fieldset.det 
{     
display:block;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin-top:20px;
margin-left:20px;
border:2px solid #CCCCCC;
background-color: #FFFFDD;

}
fieldset.det legend
{
    padding:2px 5px;
    border:2px solid #CCCCCC;
    font-weight:  bold;
    background-color: #FFFFDD;
}

div.det
{   
display:block;
background-color: #FFFFDD;
text-align: center;
width: 100%;
margin: auto;
}

Answer 1

テキストをtrの中央に配置する必要があります。div.detは左にフロートし、幅が100％である必要があり、fieldset.detも幅が100％である必要があります。例を次に示します。

幸運を！

Answer 2

text-align：leftがアウトラインCSSを上書きしている可能性があります。

<legend>Additional Breakout</legend>
<table class="det" style="text-align:left;" width="98%">