在左上方對齊按鈕文字

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

這不是完美的，可能您必須嘗試一下，但是我想這是朝正確方向邁出的一步。

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

左上對齊

使用屬性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 3

因此，我在.div2類別元素中添加了padding-bottom，因此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>