javascript - 在 React 中将文本放在 div 的底部

Question

如何在普通的旧 React(不是 React Native)中将文本放在 div 的底部？

在 html 中，您可以使用

将文本放在 div 的底部

vertical-align: text-bottom;

在 React Native 中，看起来您通过使用将文本放在 div 的底部

textAlignVertical: "bottom",

有没有一种简单的方法可以在普通的旧 React 中将文本放置在 div 的底部？ 到目前为止，我唯一可以使用的方法是使用 Flexbox。

import React from "react";
import "./styles.css";

export default function App() {  
  const style3 = {
    height: "75px",
    display: "flex",
    justifyContent: "flex-end",
    alignItems: "flex-end",
  };
  return (
    <div className="App">
      <div style={style3}>CSS Flexbox</div>
    </div>
  );
}

Codesandbox

---

编辑:这是一个简化的例子。我真正需要的是一个 div，其中包含多个不同位置的元素，以及底部的文本。

---

编辑:在 HTML 和 React 中，vertical-align: text-bottom; 不会将文本移动到 div 的底部。它只会将文本向下移动一点点到文本通常所在位置的底部。所以在 HTML 和 React 中，它都可以用于将文本向下移动一点以获得下标。但是在 HTML 和 React 中，它不能用于将文本向下移动到 div 的底部。

Answer 1

你可以使用 margin:

import React from "react";
import "./styles.css";

export default function App() {  
  const style3 = {
    height: "75px",
    marginTop: 'auto'
  };
  return (
    <div className="App">
      <div style={style3}>CSS Flexbox</div>
    </div>
  );
}

或者align-self:

import React from "react";
import "./styles.css";

export default function App() {  
  const style3 = {
    height: "75px",
    alignSelf: 'flex-end'
  };
  return (
    <div className="App">
      <div style={style3}>CSS Flexbox</div>
    </div>
  );
}