时间戳

首页 > 解决方案 > 在 React 中将文本放在 div 的底部

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

问题描述

如何在普通的旧 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>
  );
}

代码沙盒

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

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

标签： javascripthtmlcssreactjs

解决方案

你可以使用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>
  );
}

推荐阅读