Question

我正在尝试使三个图标之间保持一定间距。我的代码，即landing.js-

import React from 'react';
import MaterialIcon, {colorPalette} from 'material-icons-react';
 const Landing = () => (
    <div style={{background: "LightBlue"}}>
        <MaterialIcon icon="call" size='200' color={colorPalette.blue._200} />
        <MaterialIcon icon="search" size='200' vertical-align='50000px'/>
        <MaterialIcon icon="chat" size='200' vertical-align='right'/>
    </div>
);

export default Landing;

The output

此代码仅用于标头位于另一个文件header.js

中的主体组件

Answer 1

Flexbox布局应为您提供所需的内容：

 <div style={{
  background: "LightBlue",
  display: "flex", 
  justifyContent:"space-between",
  alignItems: "center"
  }}
>
     <MaterialIcon icon="call" size='200' color={colorPalette.blue._200} />
     <MaterialIcon icon="search" size='200' vertical-align='50000px'/>
     <MaterialIcon icon="chat" size='200' vertical-align='right'/>
 </div>

Answer 2

您要搜索吗？

.icon {
  height: 50px;
  width: 50px;
  background: red;
  display: inline-block;
}

.icon + .icon {
  margin-left: 20px;
}

<div>
  <div class='icon'></div>
  <div class='icon'></div>
  <div class='icon'></div>
</div>

如何在React.js的网页上居中对齐图标？

2 个答案: