Question

我需要创建带有图像的按钮。我定义代码

 <button id='a' value='value1' >
    <img="image.png" align="right|middle"/>
    "myButton"
 </button>

但问题是

我看到的图像与文字的对齐方式不同我的意思是文本和图像的高度不同，而且我无法使tham看起来不错
我不确定这样做是否是最好的方法-（我必须以某种方式存储按钮ID和按钮值）

Answer 1

您可以使用flexbox简化对齐方式（align-items很有用-在这里我将其设置为center）。伸缩容器的子级可以使用order属性更改其显示顺序。

下面是一个带有单个道具align的组件的玩具示例，该道具确定图像是在文本之前还是之后。

const Button = ({ align }) => (
  <button className="my-button">
    <img className={align} src="http://via.placeholder.com/50x50" />
    click me
  </button>
)

ReactDOM.render(<div>
  <Button />
  <Button align="right" />
</div>, document.getElementById("root"))

.my-button {
  display: flex;
  align-items: center;
}

.right {
  order: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

在reactjs的左侧创建文本并在右侧创建图像/图标的按钮

1 个答案: