对齐按钮文本左上角

Question

如何在下面的情况下(DIV2(使按钮文本顶部左上。

我必须使用按钮来进行某种要求，但使其看起来像普通文本。任何帮助您的帮助。

容器是Flexbox列，并具有一个带有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>

您可以完成组合并根据您的要求应用属性。

Answer 2

这不是完美的，您可能必须与此相处，但我想这是朝正确方向迈出的一步。

.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;
  position:absolute;
flex-direction: column;
    }

Answer 3

因此，我在.div2分类元素中添加了填充底，因此Div2内部的文本被推开并远离元素的底部边缘。

.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;
  padding-bottom: 40%; 
}

<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>