时间戳

首页 > 解决方案 > 仅水平收缩 flexbox

html - 仅水平收缩 flexbox

问题描述

我一直在尝试制作一个自定义共享按钮（用于谷歌教室），似乎弹性框是使文本居中的最佳方式。我正在制作一个分享按钮，所以我有一个图像和文字。这是我当前的代码：

a {
  border-color: green;
  border-style: solid;
  color: white;
  border-radius: 3px;
  text-decoration: none;
  background-color: green;
  font-family: calibri;
  display: flex-shrink;
  justify-content: center;
  align-items: center;
}

img {
  padding: 5px;
  height: 32px;
}

span {
padding: 5px;
}
<a href="https://classroom.google.com/share?url=http://example.com">
  <img src="https://ktibow.github.io/classroom-logo.png"\>
  <span>Share to Classroom</span>
</a>

它应该是一个漂亮的圆形按钮，左侧是 Google Classroom 徽标，右侧是文本。但是，按钮的背景会缩小到图像之外。

我试过在没有 flex-shrink 的情况下使用它。然后它会填满整个页面，这不是共享按钮通常的样子，即使它确实覆盖了图像的背景。我也尝试过设置跨度的高度和字体大小。高度没有任何作用，如果我做字体大小，那么它就会被切断。我也尝试flex-shrink: 0过图像。有谁知道如何解决这个问题？

标签： htmlcssflexbox

解决方案

a {
  border-color: green;
  border-style: solid;
  color: white;
  border-radius: 15px;
  text-decoration: none;
  background-color: green;
  font-family: calibri;
  display: flex-shrink;
  justify-content: center align-items: center;
 position: absolute;
display: flex;
}

img {
  padding: 10px;
  height:  30px;

}

span {
 margin-top: 15px;
}

我不知道这是否是您想要实现的目标。虽然不是最好的方法

推荐阅读