根据按钮位置动态标注位置答案

【问题标题】：Label position according to button position dynamically根据按钮位置动态标注位置
【发布时间】：2021-03-14 03:55:50
【问题描述】：

我正在开发一个界面，该界面允许用户更改按钮位置并在按钮下写入标签文本。我的问题是，标签并不总是在按钮下方居中，这取决于文本标签的大小和字母数，

这是我的 CSS 类

    .button-wrapper {
    display: inline-block;
    max-width: 80px;
    text-align: center;}


    .button-wrapper > button {
    display: block;
    height: 75px;
    width: 75px;
    border-radius: 50%;
    position: relative;
    border: 1px solid gray;
    text-align: center;
    :active  {border: 3px solid yellow;}
    :hover{border: 2px solid red;}}

    .button-wrapper > label {
    display: block;
    position: relative;
    font-size: 14px;
    margin:0 auto; left:0; right:0;
    padding: 3px;}

这是我的html代码

     <div class="button-wrapper">
        <button
                [class.btn-primary]="true"
                [style.color]="buttonStyle.labeLFontColor"
                [ngStyle]="{'margin-left': bar.accessPosition+'%','font-style': buttonStyle.labeLFontFamily, 'font-size.px':buttonStyle.labeLFontSize, 'font-weight':buttonStyle.labeLFontWeight,
                'background-color': buttonStyle.backgroundColor, 'font-family': buttonStyle.labeLFontFamily, 'border-color': buttonStyle.borderColor,
                     'border': buttonStyle.borderSize+'px solid', 'background':'url(assets/showcase/images/accessButtons/' + bar.accessBackImage+') white center center no-repeat',
                 'background-size': '100% 75px'}">
        </button>
        <label  *ngIf="useLabel"  [ngStyle]="{'margin-left': bar.accessPosition+'%','font-style': buttonStyle.labeLFontFamily, 'font-size.px':buttonStyle.labeLFontSize, 'font-weight':buttonStyle.labeLFontWeight,'font-family': buttonStyle.labeLFontFamily }">{{accessLabel}}</label>
    </div>

正如您所见，标签大小是动态的，标签文本也有一个输入来编写文本... 那么，我怎样才能将标签固定为始终居中并低于用户所写的任何内容。谢谢。

【问题讨论】：

你能分享一个 Stackblitz 的例子吗？
当然，这是一个 stackblitz 链接：angular-ivy-xq4wal.stackblitz.io
stackblitz.com/edit/angular-ivy-xq4wal?file=src/app/…

标签： html css angular dynamic label

【解决方案1】：

这类事情的诀窍是把你想要工作和展示的东西隔离起来，然后把它们包装起来。

在这种情况下，按钮 + 标签，很好地包裹在一个 div 中。

当你把你的页面作为一个整体放在一起时，你关心的是外部 div。页面级别应该关注这组事物的去向，而不是每个单独部分的去向。

也就是说，这是一个分叉的StackBlitz，显示了您可能想要的内容。

button-wrapper 是您要在屏幕上处理定位的外部 div（您说用户可以移动它？）。

但是，您的按钮和标签只是其中的孤立（甚至可以说是封装）项目，现在以居中的方式布置。它将问题简化为您将button-wrapper div 放在页面上的位置。无论走到哪里，按钮和标签至少都将在其中居中。

【讨论】：

【解决方案2】：

根据您提供的stacblitz link，您可能想要实现以下 CSS（只需将您的 CSS 替换为此）：

.button-wrapper {
  display: grid;
  justify-items: center;
}

.button-wrapper > button {
  display: block;
  height: 75px;
  width: 75px;
  border-radius: 50%;
  position: relative;
  border: 1px solid gray;
}

.button-wrapper > button:hover {
  border: 2px solid red;
}

.button-wrapper > button:focus {
  border: 3px solid yellow;
}

.button-wrapper > label {
  border: 1px solid red;
  display: block;
  position: relative;
  font-size: 14px;
  margin: 0 auto;
  left: 0;
  right: 0;
  padding: 3px;
}

注意事项：

您的某些 CSS 结构不正确
对于任何布局和定位，请考虑CSS Grid

【讨论】：