Question

我需要将<div>置于<td>中心，因为现在（使用我的代码）我看到右边的div，但我希望在<td>的中心看到div。这是我的代码：

<table width="100%">
  <tbody>
    <tr>
      <td>
        <div>
          <label>Start date</label>
          <br/>
          <input type="date" name="start_date">
        </div>
      </td>
      <td>
        <div>
          <label>End date</label>
          <br/>
          <input type="date" name="end_date">
        </div>
      </td>
    </tr>
  </tbody>
</table>

任何人都可以帮助我吗？我不知道如何做到这一点。

Answer 1

如果您没有强制为div设置宽度，则td的对齐更改不会执行任何操作，因为div占据宽度td的100％。然后，您需要使用text-align为div NOT 提供对齐方式：

div {
  text-align: center;
}

让div对你平齐，宽度小于宽度等等。然后使用margin：

div {
  margin: 0 auto;
}

最好使用flex：

td {
  display: flex;
  align-items: center;
  align-content: center;
}

Answer 2

在表格标记中添加style="text-align: center;"。这是JSFiddle

<table width="100%" style="text-align: center;">
    <tbody>
    <tr>
        <td>
            <div>
                <label>Start date</label><br/>
                <input type="date" name="start_date">
            </div>
        </td>
        <td>
            <div>
                <label>End date</label><br/>
                <input type="date" name="end_date">
            </div>
        </td>
    </tr>

    </tbody>
</table>

Answer 3

您只能通过向元素添加div而不使用javascript来居中width（而不是文字！）。然后，您可以使用margin: auto;。

＆＃13;

div { 
  width: 150px;
  margin: auto; 
}

＆＃13;

  <table width="100%">
  <tbody>
    <tr>
      <td>
        <div>
          <label>Start date</label><br/>
          <input type="date" name="start_date">
        </div>
      </td>
      <td>
        <div>
          <label>End date</label><br/>
          <input type="date" name="end_date">
        </div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

另一种方法是使用jQuery。这甚至可以用于动态宽度。

＆＃13;

$(window).resize(function() {
    $("td div").each(function() {
        var element = $(this),
            elementWidth = element.width(),
            parentWidth = element.parent().width();

        element.css("margin-left", ((parentWidth - elementWidth) / 2) + "px");
    });
}).resize();

＆＃13;

div {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%">
  <tbody>
    <tr>
      <td>
        <div>
          <label>Start date</label><br/>
          <input type="date" name="start_date">
        </div>
      </td>
      <td>
        <div>
          <label>End date</label><br/>
          <input type="date" name="end_date">
        </div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 4

我假设您希望div中的所有内容都在页面上居中。试试：

style="text-align:center;"

或

style="justify-content:center;"

Answer 5

将此设置为 div：

display: flex;
justify-content: center;

Answer 6

您可以使用以下内容对div的内容进行居中：

<div style="text-align:center">

但你应该把它放在你的CSS文件而不是内联

Answer 7

在align

中使用td

<td align='center'>

直播Demo

Answer 8

＆＃13;

<table width="100%">
  <tbody>
    <tr>
      <td>
        <div>
          <label>Start date</label>
          <br/>
          <input type="date" name="start_date">
        </div>
      </td>
      <td style="text-align:center">
        <div>
          <label>End date</label>
          <br/>
          <input type="date" name="end_date">
        </div>
      </td>
    </tr>

  </tbody>
</table>

＆＃13;

Answer 9

你是否想要取得这样的成就

＆＃13;

 <table width="100%" border="1" cellspacing="0" cellpadding="0">
            <tbody>
            <tr>
                <td align="center">
                    <div>
                        <label>Start date</label><br/>
                        <input type="date" name="start_date">
                    </div>
                </td>
                <td align="center">
                    <div>
                        <label>End date</label><br/>
                        <input type="date" name="end_date">
                    </div>
                </td>
            </tr>

            </tbody>
        </table>

＆＃13;

Answer 10

宽度设置中心内容的最大宽度。保证金声明是将内容集中在浏览器窗口中的内容。＆＃34; 0＆＃34;将上下边距设置为＆＃34; 0＆＃34;和＆＃34;汽车＆＃34;将右边距和左边距设置得很好，＆＃34; auto＆＃34;这实际上是内容的中心。

通过下面的使用，您应该将div标签放在中心

<div style="width:1000px; margin:0 auto;">
   <label>Start date</label><br/>
   <input type="date" name="start_date">
</div>

Answer 11

您可以将text-align: center;添加到div标记

中

<table width="100%">
  <tbody>
    <tr>
      <td>
        <div style="text-align: center;">
          <label>Start date</label><br/>
          <input type="date" name="start_date">
        </div>
      </td>
      <td>
        <div style="text-align: center;">
          <label>End date</label><br/>
          <input type="date" name="end_date">
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 12

我有一个有趣的案例，这些解决方案都不起作用。有一个CSS 3级技巧涉及到Dstrong为我工作的 top：50％：https://www.w3.org/Style/Examples/007/center.en.tmpl#vertical3

我正在处理的案件： 输出div的jQuery幻灯片。该网站是自适应的，因此我不能为任何元素设置固定宽度。尽管如此，我还是想在每张幻灯片中将项目垂直和水平居中放置。

1。使用 text-align：center 是不够的，因为我还想使文本垂直居中。只有表格单元格元素会对 vertical-align：middle 做出反应。我认为这很可惜，因为表格单元元素很多，可以说...行李。参见第2点。

2。用 display：table-cell 声明内部div无效，因为虽然我可以将文本水平和垂直居中放在表格单元内， table-cell保持粘在其父div内部的左侧。表格单元格元素对 width：100％或 margin：0 auto 没有反应。它也不遵循父div的 text-align：center 。

3。如果您遵循链接文章中的规则， top：50％ hack（如果我可以这样称呼）确实有效。它将元素向下放置到父元素高度的50％处，并使用 translate 将子元素向上移回其自身高度的一半。问题是它可能无法在旧的浏览器上运行。

您是不是试图在流体宽度设计中垂直对齐某些东西？是的，要使此技巧起作用，父元素必须具有固定的高度。将进行一些实验。

伙计，这个讨论是关于水平对齐的。是的，我理解。但是，当您迫切需要一个怪异的问题的怪异解决方案时，像这样的线程可以节省生命。此外，此技巧还可以水平使用。

我需要将<div>置于中心位置

12 个答案: