Question

如何使图例文本中的元素对齐中心？

这是我的代码..

<fieldset>
    <legend>Event details</legend>

        <table>
        <tr>
            <td>Event title </td>
            <td><input type ="text" name ="eventTitle" value="<?=$title?>"readonly/></td>
        </tr>

        <tr>
            <td>Description</td>
            <td><textarea style="resize:none" name="desc" rows="10" cols="40"><?=$desc?></textarea></td>
        </tr>

        <tr>
            <td>Venue Name</td>
            <td><input type = "text" name="venueName" value="<?=$venue?>"readonly/></td>
        </tr>

        <tr>
            <td>Location</td>
            <td><input type="text" name="location" value="<?=$location?>"readonly/></td>
        </tr>

        <tr>
            <td>Event Start Date</td>
            <td><input type="text" name="eventStartDate" value="<?=$eStart?>"readonly/></td>
        </tr>

        <tr>
            <td>Event End Date</td>
            <td><input type="text" name="eventEndDate" value="<?=$eEnd?>"readonly/></td>
        </tr>

        <tr>
            <td>Event Price</td>
            <td><input type="text" name="eventPrice" value="<?=$ePrice?>"readonly/></td>
        </tr>
        </table>

        <button type="button">Update</button>

</fieldset>

我尝试将margin auto设置在fieldset中，但仍然是相同的我也尝试将textalign中心放在表格标签中。

Answer 1

您应该能够通过为fieldset元素text-align center table并将display: inline-table元素设置为fieldset { text-align: center; } table { display: inline-table; }来实现此目的：

＆＃13;

<fieldset>
    <legend>Event details</legend>

        <table>
        <tr>
            <td>Event title </td>
            <td><input type ="text" name ="eventTitle" value="<?=$title?>"readonly/></td>
        </tr>

        <tr>
            <td>Description</td>
            <td><textarea style="resize:none" name="desc" rows="10" cols="40"><?=$desc?></textarea></td>
        </tr>

        <tr>
            <td>Venue Name</td>
            <td><input type = "text" name="venueName" value="<?=$venue?>"readonly/></td>
        </tr>

        <tr>
            <td>Location</td>
            <td><input type="text" name="location" value="<?=$location?>"readonly/></td>
        </tr>

        <tr>
            <td>Event Start Date</td>
            <td><input type="text" name="eventStartDate" value="<?=$eStart?>"readonly/></td>
        </tr>

        <tr>
            <td>Event End Date</td>
            <td><input type="text" name="eventEndDate" value="<?=$eEnd?>"readonly/></td>
        </tr>

        <tr>
            <td>Event Price</td>
            <td><input type="text" name="eventPrice" value="<?=$ePrice?>"readonly/></td>
        </tr>
        </table>

        <button type="button">Update</button>

</fieldset>

＆＃13;

<table>

＆＃13;

我真的不建议在这里使用var $button = $('#hypercomments_widget').clone(true); $('.image_01').html($button);。表元素用于表示表格数据，而不是表单字段。

Answer 2

试试这个： -

<form>
<fieldset>
<legend>Person:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>

你的CSS应该是这样的：

legend {
    margin:0 auto;
}

或

<legend align="center">Legend</legend>

Answer 3

为什么要使用表格表格？！

为表格添加修正宽度margin: 0 auto;

table{
    width: 378px;
    margin: 0 auto;
}

工作示例：https://jsfiddle.net/oog3kdwk/

或

fieldset{ text-align: center; } table{ display: inline-block; text-align: left; }

工作示例：https://jsfiddle.net/oog3kdwk/1/

Answer 4

  <legend align="center" >Event details</legend>

Answer 5

如果我理解您的疑问，我建议您对HTML进行一些更改。表标记不应该相对于图例标记缩进，而应该作为她的兄弟。 Look here

我在这个例子中做了什么，你只是集中了标签，但是如果你需要集中输入，那么在CSS中添加就很简单

＆＃13;

table tr td:first-child {
    text-align: center;
}

＆＃13;

<fieldset>
  <legend>Event details</legend>

  <table>
    <tr>
      <td>Event title</td>
      <td>
        <input type="text" name="eventTitle" value="" readonly/>
      </td>
    </tr>

    <tr>
      <td>Description</td>
      <td>
        <textarea style="resize:none" name="desc" rows="10" cols="40"></textarea>
      </td>
    </tr>

    <tr>
      <td>Venue Name</td>
      <td>
        <input type="text" name="venueName" value="" readonly/>
      </td>
    </tr>

    <tr>
      <td>Location</td>
      <td>
        <input type="text" name="location" value="" readonly/>
      </td>
    </tr>

    <tr>
      <td>Event Start Date</td>
      <td>
        <input type="text" name="eventStartDate" value="" readonly/>
      </td>
    </tr>

    <tr>
      <td>Event End Date</td>
      <td>
        <input type="text" name="eventEndDate" value="" readonly/>
      </td>
    </tr>

    <tr>
      <td>Event Price</td>
      <td>
        <input type="text" name="eventPrice" value="" readonly/>
      </td>
    </tr>
  </table>

  <button type="button">Update</button>
</fieldset>

＆＃13;

我希望以某种方式帮助

Answer 6

将字段集和图例的CSS代码更改为：

  group               start                 end count
  <int>              <dttm>              <dttm> <int>
1     0 2016-10-28 19:21:19 2016-10-28 19:21:21     4
2     1 2016-10-28 19:23:23 2016-10-28 19:23:25     4
3     2 2016-10-30 03:59:09 2016-10-30 03:59:09     1
4     3 2016-10-30 08:54:31 2016-10-30 08:54:35     2

然后改变

活动详情 ...

如何在图例中对齐中心元素

6 个答案: