代码之家 › 专栏 › 技术社区 › whitebear

左侧的按钮标签

css html

whitebear · 技术社区 · 10 月前

我想制作按钮标签,例如

<button style="width:80px">â  back  <button>

那么我想把 â 在左边并设置 back 在按钮的中间。

例如

 ____________
|â   back    |

我认为我应该使用Flex,但有点困惑,因为

应该在左边

< 返回 应该在中 middle of button 它不是 remaining space

我该怎么做?

4 回复 | 直到 10 月前

A Haworth 10 月前

由于反向箭头只是一条视觉线索,我会将其从DOM中删除,并在位于左侧的before伪元素中显示。

浏览器似乎已经将按钮的内容居中,所以这个片段不需要为后面的文本添加文本对齐。

button::before {
  content: 'â';
  position: absolute;
  left: 0;
}

button {
  position: relative;
}

<button style="width:80px">back</button>

Yuu 10 月前

我认为你可以使用另一种方法,使用绝对位置并将文本居中对齐

有了这个,你将实现两件事

保持箭头始终在左侧
将文本居中对齐,不考虑左边的箭头(因为箭头将具有绝对位置,所以不会将文本居中)

<button>
  <span class="arrow">â</span>
  <span class="text">back</span>
</button>

button {
  position: relative;
  width: 100px;
  text-align: center;
}

button .arrow {
  position: absolute;
  left: 5px;
}

Tushar Jadav 10 月前

你确实可以使用 Flexbox 。关键是使用的组合 justify-content 和 margin 属性将箭头放置到左边和中的文本居中 .

<button style="width: 80px; display: flex; align-items: center; justify-content: center; position: relative;">
    <span style="position: absolute; left: 8px;">â</span>
    <span style="margin: 0 auto;">back</span>
</button>

prasad_ 10 月前

你可以试试这个:

.grid-container {
  display: grid;
  grid-template-columns: 60px 60px 60px;
  padding: 5px;
}

.grid-item {
  padding: 5px;
  font-size: 20px;
  text-align: center;
}

<!-- With left arrow aligned to the left and the "Back" in the center of the button -->
<button class="grid-container">
  <span class="grid-item" style="text-align:left;">&larr;</span>
  <span class="grid-item">Back</span>
  <span class="grid-item"></span>
</button>
<br>

<!-- With the "Back" in the center of the button (for comparison) -->
<button class="grid-container">
  <span class="grid-item"></span>
  <span class="grid-item">Back</span>
  <span class="grid-item"></span>
</button>

M Junaid 10 月前

.button {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100px; /* Adjust the width as needed */
       padding: 5px;
       border: 1px solid #000;
       background-color: #f0f0f0;
       cursor: pointer;
       position: relative;
    }

.button .arrow {
       position: absolute;
       left: 5px; /* Adjust the left position as needed */
     }

.button .text {
       flex-grow: 1;
       text-align: center;
 }

    <button class="button">
       <span class="arrow">â</span>
       <span class="text">back</span>
   </button>