如何在React Bootstrap中的同一行上垂直对齐图像和文本？

ReactJS有一种非常漂亮的方法，可以在React Bootstrap的同一行中垂直对齐图像和文本。 ReactJS是Facebook开发的用于构建前端各种组件的前端库。 Bootstrap是Twitter开发的CSS框架，用于构建CSS丰富的前端网站。

包括Bootstrap：通过在HTML页面的部分中包含以下链接，可以将Bootstrap嵌入到React应用程序中：

上面的代码会将CSS Bootstrap框架嵌入到我们的HTML网页中。

创建React应用程序：

步骤1：使用以下命令创建一个React应用程序：

npx create-react-app foldername

步骤2：建立专案资料夹(即资料夹名称)之后，使用以下指令移至该资料夹：

cd foldername

项目结构：如下图所示。

项目结构

我们可以通过在图像和文本标签之间放置一个换行符来垂直对齐图像和文本。 React HTML标签是自动关闭的标签，因此请确保在打开标签时也要关闭标签。

文件名：App.js

Javascript

import React from "react";
import Container from "react-bootstrap/Container";
import Card from "react-bootstrap/Card";
import "./App.css";
  
const App = () => {
  const subtitle = "Hi There";
  const infoIcon = "https://www.pixelstalk.net/wp-content/uploads/" + 
  "images1/Free-Download-Sunrise-Desktop-Images-Wallpapers.jpg"
  
  return (
    
      
        

          
          

          
            {subtitle}
          
        
      
    
  );
};
  
export default App;

运行应用程序的步骤：从项目的根目录中使用以下命令运行应用程序：

npm start

输出：

输出