jjzjj

javascript - md-button 内的 Font Awesome 图标对齐

coder 2024-05-11 原文

我正在尝试对齐按钮内的超棒字体图标，以便它们相对于工具栏上的文本居中。我有以下标记； 

<div ng-app="app">
  <md-toolbar>
      <div class="md-toolbar-tools" md-tall"">
        <h2>
          <span>Icons</span>
        </h2>
        <md-button class="md-icon-button">
          <md-icon md-font-icon="fa-circle" class="fa"></md-icon>
        </md-button>
        <md-button class="md-icon-button">
          <md-icon md-font-icon="fa-circle" class="fa fa-lg"></md-icon>
        </md-button>
    </div>
  </md-toolbar>
</div>

产生以下布局；

第二个图标上的

fa-lg 使它看起来居中，尽管我怀疑它仍然与顶部对齐。我尝试在 md-button 上粘贴 layout-alignment="center center" 没有效果。

我如何控制 md-buttons 中超赞字体图标的对齐方式，特别是如何在工具栏中将它们垂直居中？是否有 Angular Material 方法可以进行这种对齐，或者此处是否需要自定义 CSS？

CodePen

最佳答案

似乎是 md-icon 元素上的 24px 固定高度扰乱了图标的垂直对齐。 FontAwesome 图标采用动态高度设计，因此在 md-icon 元素上强制使用固定高度是不兼容的；这个元素的中间不再是图标的中间。尝试用 height: auto; 覆盖它，它应该可以愉快地工作，例如:

md-icon {
  height: auto;
}

关于javascript - md-button 内的 Font Awesome 图标对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33950670/

javascriptmd-buttoncodesectioniconcssangularjsfont-awesomeangular-material

有关javascript - md-button 内的 Font Awesome 图标对齐的更多相关文章

  1. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby-on-rails - rails 上的 ruby : radio buttons for collection select - 2

    我有一个集合选择:此方法的单选按钮是什么？谢谢 最佳答案 Rails3中没有这样的助手。在Rails4中，它是collection_radio_buttons. 关于ruby-on-rails-rails上的ruby:radiobuttonsforcollectionselect，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/18525986/

  4. ruby - 如何在ruby中提取方括号内的内容 - 2

    我正在尝试提取方括号内的内容。到目前为止，我一直在使用它，它有效，但我想知道我是否可以直接在正则表达式中使用某些东西，而不是使用这个删除功能。a="Thisissuchagreatday[coolawesome]"a[/\[.*?\]/].delete('[]')#=>"coolawesome" 最佳答案 差不多。a="Thisissuchagreatday[coolawesome]"a[/\[(.*?)\]/,1]#=>"coolawesome"a[/(?"coolawesome"第一个依赖于提取组而不是完全匹配；第二个利用前瞻和

  5. ruby - block 内的实例评估 - 2

    我有一个Builder类，可让您添加到其中一个实例变量:classBuilderdefinitialize@lines=[]enddeflinesblock_given??yield(self):@linesenddefadd_line(text)@lines现在，我该如何改变它my_builder=Builder.newmy_builder.lines{|b|b.add_line"foo"b.add_line"bar"}pmy_builder.lines#=>["foo","bar"]进入这个？my_builder=Builder.newmy_builder.lines{add_li

  6. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. ruby - 我可以创建长度为 8 的 md5 哈希吗？ - 2

    是否可以创建8个字符长的md5散列？ 最佳答案 MD5创建16字节的哈希值。您当然可以将字符串裁剪为八个字符，如myString[0..7]一样，但请注意，这不再是有效的MD5散列。 关于ruby-我可以创建长度为8的md5哈希吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/5854208/

  9. ruby - 打印一个范围内的数字 - 2

    我正在尝试使用以下代码打印1到50之间的所有数字:[1..50].each{|n|putsn}但是控制台打印[1..50]我想打印这样的东西1个2个3个4个...50 最佳答案 试试下面的代码:(1..50).each{|n|putsn}问题是您使用的是[]定界符而不是()定界符。 关于ruby-打印一个范围内的数字，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/14528573

  10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

随机推荐