html - 在中心对齐字段集图例

Question

HTML

<fieldset class="Fieldset">
    <legend class="Legend" id="Legend">Add</legend>
    ...

CSS

.Fieldset
{
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 10px;
}

.Legend
{
    border: medium none;
    left: 40%;
    margin: 0 auto;
    padding: 0 10px;
    position: relative;
    text-align: center;
    width: auto;
    color: #3C6EAC;
    font-size: 18px;
    font-weight: bold;
}

在 Firefox 中，图例居中对齐。但在 Chrome 中则不然。

Answer 1

添加此 CSS，删除 margin :auto & left:40% 然后添加 margin-left:40%.

.Fieldset {
  border: 1px solid #CCC;
  border-radius: 5px;
  padding: 10px;
}

.Legend {
  border: medium none;
  margin-left: 40%;
  padding: 0 10px;
  position: relative;
  text-align: center;
  width: auto;
  color: #3C6EAC;
  font-size: 18px;
  font-weight: bold;
}

<fieldset class="Fieldset">
  <legend class="Legend" id="Legend">Add</legend>
</fieldset>

View on JSFiddle