blocks|key|3052612|text|向包含该按钮的td元素添加vertical-align:+middle;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3052613|<td+style="vertical-align:middle;">++<--add+this+to+center+vertically
++<a+href="#"+class="btn+btn-primary">
++++<i+class="icon-check+icon-white"></i>
++</a>
</td>|code-block|syntax|javascript|3052614|entityMap^0|7|2|D|N|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>Add <code>vertical-align: middle;</code> to the <code>td</code> element that contains the button</p>

<pre><code>&lt;td style="vertical-align:middle;"&gt;  &lt;--add this to center vertically
  &lt;a href="#" class="btn btn-primary"&gt;
    &lt;i class="icon-check icon-white"&gt;&lt;/i&gt;
  &lt;/a&gt;
&lt;/td&gt;
</code></pre>


blocks|key|206905|text|对于BOOTSTRAP+3.X：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|206906|Bootstrap现在具有以下表格单元格样式：|206907|.table+tbody+>+tr+>+td{
++++vertical-align:+top;
}|code-block|syntax|javascript|206908|方法是添加您自己的类，为前面的选择器添加更多的特异性：|206909|.table+tbody+>+tr+>+td.vert-aligned+{
++++vertical-align:+middle;
}|206910|然后将类添加到您的td中：|offset|length|style|CODE|206911|<tr>
++++<td+class="vert-aligned"></td>
++++...
</tr>|206912|对于BOOTSTRAP+2.X|206913|有带Bootstrap的no+way+to+do+this。|206914|当在表单元格中使用时，vertical-align做了大多数人期望它做的事情，即模仿(旧的、不推荐使用的)+valign属性。在符合标准的现代浏览器中，以下三个代码片段执行相同的操作：|BOLD|206915|<td+valign="middle">++</td>
<td+style="vertical-align:middle">+...+</td>
<div+style="display:table-cell;+vertical-align:middle">+...+</div>|206916|检查你的fiddle+updated|206917|进一步|206918|206919|vertical-align:+middle+with+Bootstrap+2|unordered-list-item|206920|Understanding+vertical-align|206921|Vertical+alignment+of+elements+in+a+div|206922|206923|此外，您不能使用.vert引用td类，因为Bootstrap已经有了这个类：|206924|.table+td+{
+++padding:+8px;
+++line-height:+20px;
+++text-align:+left;
+++vertical-align:+top;+//+The+problem!
+++border-top:+1px+solid+#dddddd;
}|206925|并且重载了'.vert‘类中的vertical-align:+middle，所以你必须将这个类定义为td.vert。|206926|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twitter/bootstrap/issues/2750|1|http://jsfiddle.net/utvUU/1/|2|https://stackoverflow.com/questions/11592306/vertical-align-with-twitter-bootstrap|3|http://phrogz.net/css/vertical-align/index.html|4|https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div^0|0|0|0|0|0|9|2|0|0|0|C|H|0|0|B|E|0|0|4|E|1|0|0|0|0|13|2|0|0|S|3|0|0|13|4|0|0|8|5|F|2|0|0|F|M|1E|7|0^^$0|@$1|2|3|4|5|6|7|22|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|23|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|24|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|25|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|26|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|27|8|@$O|28|P|29|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|F|7|2A|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|2B|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|2C|8|@]|9|@$O|2D|P|2E|1|2F]]|A|$]]|$1|Y|3|Z|5|6|7|2G|8|@$O|2H|P|2I|Q|10]]|9|@]|A|$]]|$1|11|3|12|5|F|7|2J|8|@]|9|@]|A|$G|H]]|$1|13|3|14|5|6|7|2K|8|@]|9|@$O|2L|P|2M|1|2N]]|A|$]]|$1|15|3|16|5|6|7|2O|8|@]|9|@]|A|$]]|$1|17|3|-4|5|6|7|2P|8|@]|9|@]|A|$]]|$1|18|3|19|5|1A|7|2Q|8|@]|9|@$O|2R|P|2S|1|2T]]|A|$]]|$1|1B|3|1C|5|1A|7|2U|8|@]|9|@$O|2V|P|2W|1|2X]]|A|$]]|$1|1D|3|1E|5|1A|7|2Y|8|@]|9|@$O|2Z|P|30|1|31]]|A|$]]|$1|1F|3|-4|5|6|7|32|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|6|7|33|8|@$O|34|P|35|Q|R]|$O|36|P|37|Q|R]]|9|@]|A|$]]|$1|1I|3|1J|5|F|7|38|8|@]|9|@]|A|$G|H]]|$1|1K|3|1L|5|6|7|39|8|@$O|3A|P|3B|Q|R]|$O|3C|P|3D|Q|R]]|9|@]|A|$]]|$1|1M|3|-4|5|6|7|3E|8|@]|9|@]|A|$]]]|1N|$1O|$5|1P|1Q|1R|A|$1S|1T]]|1U|$5|1P|1Q|1R|A|$1S|1V]]|1W|$5|1P|1Q|1R|A|$1S|1X]]|1Y|$5|1P|1Q|1R|A|$1S|1Z]]|20|$5|1P|1Q|1R|A|$1S|21]]]]

<h3>FOR BOOTSTRAP 3.X:</h3>

<p>Bootstrap now has the following style for table cells:</p>

<pre><code>.table tbody &gt; tr &gt; td{
    vertical-align: top;
}
</code></pre>

<p>The way to go is to add your own class, adding more specificity to the previous selector:</p>

<pre><code>.table tbody &gt; tr &gt; td.vert-aligned {
    vertical-align: middle;
}
</code></pre>

<p>And then add the class to your <code>td</code>s:</p>

<pre><code>&lt;tr&gt;
    &lt;td class="vert-aligned"&gt;&lt;/td&gt;
    ...
&lt;/tr&gt;
</code></pre>

<h3>FOR BOOTSTRAP 2.X</h3>

<p>There is <a href="https://github.com/twitter/bootstrap/issues/2750" rel="noreferrer">no way to do this</a> with Bootstrap.</p>

<p>When used in table cells, <strong>vertical-align</strong> does what most people expect it to, which is to mimic the (old, deprecated) valign attribute. In a modern, standards-compliant browser, the following three code snippets do the same thing:</p>

<pre><code>&lt;td valign="middle"&gt; &lt;!-- but you shouldn't ever use valign --&gt; &lt;/td&gt;
&lt;td style="vertical-align:middle"&gt; ... &lt;/td&gt;
&lt;div style="display:table-cell; vertical-align:middle"&gt; ... &lt;/div&gt;
</code></pre>

<p>Check your <a href="http://jsfiddle.net/utvUU/1/" rel="noreferrer">fiddle updated</a></p>

<h3>Further</h3>

<ul>
<li><a href="https://stackoverflow.com/questions/11592306/vertical-align-with-twitter-bootstrap">vertical-align: middle with Bootstrap 2</a></li>
<li><a href="http://phrogz.net/css/vertical-align/index.html" rel="noreferrer">Understanding vertical-align</a></li>
<li><a href="https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div">Vertical alignment of elements in a div</a></li>
</ul>

<p>Also, you can't refer to the <code>td</code> class using <code>.vert</code> because Bootstrap already has this class:</p>

<pre><code>.table td {
   padding: 8px;
   line-height: 20px;
   text-align: left;
   vertical-align: top; // The problem!
   border-top: 1px solid #dddddd;
}
</code></pre>

<p>And is overloading the <code>vertical-align: middle</code> in '.vert' class, so you have to define this class as <code>td.vert</code>.</p>


blocks|key|204849|text|Bootstrap+3的一个小更新。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|204850|Bootstrap现在具有以下表格单元格样式：|204851|.table+tbody>tr>td
{
++++vertical-align:+top;
}|code-block|syntax|javascript|204852|方法是添加一个自己的类，使用相同的选择器：|204853|.table+tbody>tr>td.vert-align
{
++++vertical-align:+middle;
}|204854|然后将其添加到您的tds|204855|<td+class="vert-align"></td>|204856|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>A little update for Bootstrap 3.</p>

<p>Bootstrap now has the following style for table cells:</p>

<pre><code>.table tbody&gt;tr&gt;td
{
    vertical-align: top;
}
</code></pre>

<p>The way to go is to add a your own class, with the same selector:</p>

<pre><code>.table tbody&gt;tr&gt;td.vert-align
{
    vertical-align: middle;
}
</code></pre>

<p>And then add it to your tds</p>

<pre><code>&lt;td class="vert-align"&gt;&lt;/td&gt;
</code></pre>


blocks|key|206939|text|将此代码添加到css中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|206940|.table-vcenter+td+{
+++vertical-align:+middle!important;
}|code-block|syntax|javascript|206941|然后将类添加到表中：|206942|++++++++<table+class="table+table-hover+table-striped+table-vcenter">|206943|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>add this to your css</p>

<pre><code>.table-vcenter td {
   vertical-align: middle!important;
}
</code></pre>

<p>then add to the class to your table:</p>

<pre><code>        &lt;table class="table table-hover table-striped table-vcenter"&gt;
</code></pre>


blocks|key|205498|text|为了解决这个问题，我把这个类放到了网页上|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205499|<style>++++++++++++++++++++++++
++++td.vcenter+{
++++++++vertical-align:+middle+!important;
++++++++text-align:+center+!important;
++++}
</style>|code-block|syntax|javascript|205500|在我的TemplateField里有这个|205501|<asp:TemplateField+ItemStyle-CssClass="vcenter">|205502|因为CSS类直接指向td+(tabledata)元素，并且在每个设置的末尾都有!important语句。它将覆盖规则bootsraps+CSS类设置。|205503|希望能有所帮助|205504|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>To fix this, i put this class on the webpage</p>

<pre><code>&lt;style&gt;                        
    td.vcenter {
        vertical-align: middle !important;
        text-align: center !important;
    }
&lt;/style&gt;
</code></pre>

<p>and this in my TemplateField</p>

<pre><code>&lt;asp:TemplateField ItemStyle-CssClass="vcenter"&gt;
</code></pre>

<p>as the CSS class points directly to the td (tabledata) element and has the !important statment at the end each setting. It will over rule bootsraps CSS class settings.</p>

<p>Hope it helps </p>


blocks|key|2839824|text|那么为什么td的默认设置是垂直对齐:+top；呢？我真的还不知道。我不敢碰它。而是将其添加到样式表中。它改变了表格中的按钮。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2839825|table+.btn{
++vertical-align:+top;
}|code-block|syntax|javascript|2839826|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>So why is td default set to vertical-align: top;? I really don't know that yet. I would not dare to touch it. Instead add this to your stylesheet. It alters the buttons in the tables. </p>

<pre><code>table .btn{
  vertical-align: top;
}
</code></pre>


<p>I'm using Twitter Bootstrap, and attempting to center a button within a table cell. I only really need it centered vertically.</p>

<pre><code>&lt;table class="table table-bordered table-condensed"&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;a href="#" class="btn btn-primary"&gt;&lt;i class="icon-check icon-white"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="#"&gt;Todo Item One&lt;/a&gt;&lt;br /&gt;&lt;span class="label label-success"&gt;One thing&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>Please see my <a href="http://jsfiddle.net/timotheus/utvUU/" rel="noreferrer">JSFiddle</a> for the problem. I've tried several table centering tricks I know about, but none seem to work properly. Any ideas? Thanks in advance.</p>

<p><strong>UPDATE:</strong> Yes, I've tried <code>vertical-align:middle;</code>, and that works if it's inline, but not if it's in a class the <code>td</code> has. Updated the JSFiddle to reflect this.</p>

<p><strong>Final Update:</strong> I'm an idiot, and didn't check to see if it was being overwritten by bootstrap.css</p>


Centering a button vertically in table cell, using Twitter Bootstrap

我正在使用Twitter Bootstrap，并尝试在表格单元格内居中放置一个按钮。我真的只需要它垂直居中。<table class="table table-bordered table-condensed">  <tbody>    <tr>      <td><a href="#" class="btn btn-...

问使用Twitter Bootstrap使按钮在表格单元格中垂直居中
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Twitter Bootstrap使按钮在表格单元格中垂直居中EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Twitter Bootstrap使按钮在表格单元格中垂直居中
EN