logo标签列表

在按钮内部居中SVG图标。

csstwitter-bootstrapsvg
4

我目前遇到的问题是，我的按钮内部的图标无法垂直居中。不知何故，svg似乎也粘在了围绕它的span之外。我该怎么解决这个问题呢？

这是我的代码：

<button class="btn btn-block btn-secondary dropdown-toggle" type="button"
 id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      XS
      <div class="select-arrow-icon">
           {% sw_icon 'arrow-down' %}
      </div>
</button>

enter image description here

您想要垂直和水平居中还是只是垂直居中？ - Jacob Philpott
@JacobPhilpott 只能垂直放置，它应该保持在右侧，但与文本处于同一水平线上。 - Rugo
1
尝试遵循CSS标准，将id命名为 dropdown-menu-button 而非 dropdownMenuButton。 - kissu
1个回答
4

我建议使用CSS的flex属性。

将以下样式添加到父级

元素中：

#dropdownMenuButton {
  display: flex;
  align-items: center;
}
很遗憾，这并没有改变SVG的位置，它仍然在原地。 - Rugo
1
嗯...你能同时发布一下你正在使用的CSS吗？也许另一个属性正在覆盖它..因为我非常确定垂直对齐的最佳方法是使用flex box。 - Jacob Philpott
我在周围的div中添加了一个高度为0px，它现在可以工作了。但是这种做法是否合适，只是添加0px呢？ - Rugo
我不确定为什么你需要添加0像素.. 我需要看到所有的CSS，但使用flex box绝对是垂直对齐的最佳方法。 - Jacob Philpott
1
align-items 属性将使元素在离轴方向上居中。也就是说，它只会在垂直方向上居中（因为默认情况下 flex-direction 是 row）。你还需要使用 justify-content: center 来使元素在主轴方向上水平居中。 - user2490003
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接