html - 左上对齐按钮文本

Question

如何在以下情况 (div2) 中使按钮文本位于左上方。

我必须使用按钮来满足某些要求，但让它看起来像一个普通的文本。任何帮助你帮助。

容器是 flexbox column 并且有一个 flex 1 的按钮。

我不想在按钮内添加一个元素并使其成为绝对位置。

需要更清洁的方式。

.container {
  display: flex;
  flex-flow: column;
  height: 200px;
  border: 1px solid gray;
}
.div1, .div3 {
  height: 40px;
}
.div2 {
  flex: 1;
  border: 1px solid red;
  text-align: left;
}

<div class="container">
   <div class="div1">
     div1
   </div>
   <button class="div2">
     I want this text to be top left
   </button>
   <div class="div3">
     div3
   </div>
</div>

Answer 1

左上对齐

使用属性 flex-direction: column; 将文本左上对齐。

.container {
  display: flex;
  flex-flow: column;
  height: 200px;
  border: 1px solid gray;
}
.div1, .div3 {
  height: 40px;
}
.div2 {
  flex: 1;
  border: 1px solid red;
  text-align: left;
  flex-direction:column;
}

<div class="container">
   <div class="div1">
     div1
   </div>
   <button class="div2">
     I want this text to be top left
   </button>
   <div class="div3">
     div3
   </div>
</div>

居中对齐

只需将您的样式 text-align:left 更改为 text-align:center。

.container {
  display: flex;
  flex-flow: column;
  height: 200px;
  border: 1px solid gray;
}
.div1, .div3 {
  height: 40px;
}
.div2 {
  flex: 1;
  border: 1px solid red;
  text-align: center;  
}

<div class="container">
   <div class="div1">
     div1
   </div>
   <button class="div2">
     I want this text to be top left
   </button>
   <div class="div3">
     div3
   </div>
</div>

您可以根据需要进行组合并应用属性。