html - 如何使按钮在表格单元格内居中

coder 2023-08-03 原文

我试图通过以下方式使表格内的按钮居中:text-align: center

但是，这似乎对我不起作用。

注意:我使用 Display: table-cell 结合 Vertical-align: middle 使按钮的文本居中。如您所见，第一个按钮“AAAAAAA”的文本位于中间。

谁能帮我在不影响按钮文本的情况下将按钮居中？提前谢谢你。

示例代码如下:

http://codepen.io/anon/pen/pAcBx

最佳答案

我经常这样做

  margin:auto;
  display:block;

我想@rhino 的回答也可以。记得去掉

  display:table-cell;

编辑:

请记住，这样做会使 a 元素 content 垂直居中，但是如果您还给 a 元素一个任意高度, 周围的背景不会居中。

示例 1:文本垂直居中。但是您将按钮高度设置为 32px 而周围的容器不是:

table, tr, td{
  border: solid;
 
}
.my_table {
	width: 312px;
	margin: 0 auto;
}

.dashed {
  border-bottom:1px dashed #99F;
  width:100%;
  display:block;
  position:absolute;
  font-size:0;
  top:43px;
}

/*BUTTON TABLE left CELL*/
.left_button_cell{
  margin: 0 auto;
	text-align: center;     /*<---- NOT WORKING */
	height: 50px;
	padding-top: 10px;
	line-height: 22px;
}


/*BUTTON TABLE right CELL*/
.right_button_cell{
	text-align: center; 
	height: 50px;
	padding-top: 10px;
	line-height: 22px;
}

.inner_button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#fbfbfb;
	-webkit-border-top-left-radius:8px;
	-moz-border-radius-topleft:8px;
	border-top-left-radius:8px;
	-webkit-border-top-right-radius:8px;
	-moz-border-radius-topright:8px;
	border-top-right-radius:8px;
	-webkit-border-bottom-right-radius:8px;
	-moz-border-radius-bottomright:8px;
	border-bottom-right-radius:8px;
	-webkit-border-bottom-left-radius:8px;
	-moz-border-radius-bottomleft:8px;
	border-bottom-left-radius:8px;
	text-indent:0;
	border:2px solid #dcdcdc;
	display:block;
  margin:auto;
	color:#939393;
	font-family:arial;
	font-size:15px;
	font-weight:normal;
	font-style:normal;
	height:32px;
	line-height:16px;
	width:104px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
	word-wrap:break-word;
	vertical-align:middle;
}

 
.inner_button:hover {
	background-color:#EBEBEB;
}
.inner_button:active {
	position:relative;
	top:1px;
}

<div class="dashed"></div>
<table class="my_table">
  <tbody>
    <tr>
      <td class="left_button_cell">
        <a class="inner_button" href="#">AAAAAAAA</a>
        </td>
      <td class="right_button_cell">
      <a class="inner_button" href="#">BBBBBBBB BBBBBBBB</a>
      </td>

    </tr>
  </tbody>
</table>

您也可以将行高设置为 32px，这适用于第一个按钮，但第二个按钮会中断。此外，您可以设置一个 6px 的按钮填充来实现相同的结果，而无需声明明确的高度(就像 bootstrap 或 materialize 等 css 框架所做的那样)，但是第二个按钮上的换行符会导致按钮大小不均匀。

所以，这是我建议的技巧:将 a 元素的行高设置为 32px，然后将其内部文本包裹在 span 元素中将行高重置为 16px 的位置:

table, tr, td{
  border: solid;
 
}
.my_table {
	width: 312px;
	margin: 0 auto;
}

/*BUTTON TABLE left CELL*/
.left_button_cell{
  margin: 0 auto;
	text-align: center;     /*<---- NOT WORKING */
	height: 50px;
	padding-top: 10px;
	line-height: 22px;
}


/*BUTTON TABLE right CELL*/
.right_button_cell{
	text-align: center; 
	height: 50px;
	padding-top: 10px;
	line-height: 22px;
}

.inner_button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#fbfbfb;
	-webkit-border-top-left-radius:8px;
	-moz-border-radius-topleft:8px;
	border-top-left-radius:8px;
	-webkit-border-top-right-radius:8px;
	-moz-border-radius-topright:8px;
	border-top-right-radius:8px;
	-webkit-border-bottom-right-radius:8px;
	-moz-border-radius-bottomright:8px;
	border-bottom-right-radius:8px;
	-webkit-border-bottom-left-radius:8px;
	-moz-border-radius-bottomleft:8px;
	border-bottom-left-radius:8px;
	text-indent:0;
	border:2px solid #dcdcdc;
	display:block;
  margin: 0 auto;
	color:#939393;
	font-family:arial;
	font-size:15px;
	font-weight:normal;
	font-style:normal;
	height:32px;
	line-height:32px;
	width:104px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
	word-wrap:break-word;
	vertical-align:middle;
}

.inner_button span {
  line-height:16px;
  display:inline-block;
}
.inner_button:hover {
	background-color:#EBEBEB;
}
.inner_button:active {
	position:relative;
	top:1px;
}

<table class="my_table">
  <tbody>
    <tr>
      <td class="left_button_cell">
        <a class="inner_button" href="#">
          <span>AAAAAAAA
                  </span>
        </a>
      </td>
      <td class="right_button_cell">
        <a class="inner_button" href="#">
          <span>BBBBBBBB BBBBBBBB</span>
        </a>
      </td>

    </tr>
  </tbody>
</table>

编辑 2019

您可以使用 flexbox 实现相同的效果。但是，这意味着 border-spacing 属性不再适用，因此您需要对单元格边距进行一些微调。

基本上，您将 flex 属性设置为:

.my_table tr {
  display:flex;
}

.my_table td {
  margin: 2px;
  height: 60px;
  display:flex;
  flex-grow:1;
  /* centering the button */
  align-items:center;
  justify-content:center;
}


.inner_button {
  display:flex;
  /* centering the text inside the button */
  align-items:center;
  justify-content:center;

  /* plus the other properties */
}

有了这个，您不再需要玩 span，并且 child 的对齐方式得到明确控制。

table,  td{
  border: solid;
 
}
.my_table {
	width: 312px;
	margin: 0 auto;
}
.my_table tr {
  display:flex;
}
 
.my_table td {
  margin: 2px;
  height: 60px;
  display:flex;
  flex-grow:1;
  align-items:center;
  justify-content:center;
}
 

.inner_button {
  align-items:center;
  justify-content:center;
  display:flex;
  width:104px;
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background-color:#fbfbfb;
  text-align:center;
  border-radius:8px; 
  border:2px solid #dcdcdc;
  color:#939393;
	font-family:arial;
	font-size:15px;
	height:45px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
	word-wrap:break-word;
	
}

.inner_button:hover {
	background-color:#EBEBEB;
}
.inner_button:active {
	position:relative;
	top:1px;
}

<table class="my_table">
  <tbody>
    <tr>
      <td class="left_button_cell">
        <a class="inner_button" href="#">
       AAAAAAAA
                
        </a>
      </td>
      <td class="right_button_cell">
        <a class="inner_button" href="#">
         BBBBBBBB BBBBBBBB
        </a>
      </td>

    </tr>
  </tbody>
</table>

无论如何，一旦切换到此布局，就没有理由坚持使用表格，您不妨将布局转换为 div。

关于html - 如何使按钮在表格单元格内居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24101798/

格内 html px border code css

有关html - 如何使按钮在表格单元格内居中的更多相关文章

ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
ruby - 如何从 ruby 中的字符串运行任意对象方法？ - 2
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2
给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？最佳答案在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru
ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2
我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚
ruby - 如何指定 Rack 处理程序 - 2
Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack
ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2
在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。最佳答案这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/
ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2
我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。最佳答案我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

html - 如何使按钮在表格单元格内居中

有关html - 如何使按钮在表格单元格内居中的更多相关文章

随机推荐