如何在 React 上居中显示图像答案

【问题标题】：How to center an image on React如何在 React 上居中显示图像
【发布时间】：2022-02-11 14:59:27
【问题描述】：

抱歉，因为这是一个简单的问题，但我已经尝试了很多方法，但仍然找不到使图像居中的解决方案：className="meme--image" 我只是希望该图像位于页面的中心。

这是我的 CSS 代码：

.form {
    gap: 20px;
    padding-top: 40px;
    padding-left: 50px;
    padding-right: 40px;
    border-radius: 5px;
    display: grid;
    grid-template: 40px 40px  / 1fr 1fr;
}

.form--submit {
    grid-column: 1/ -1;
    background: linear-gradient(90deg, #672280 1.18%, #A626D3 100%);
    color: white;
    border: none;
    cursor: pointer;
    font-family: "Karla", sans-serif;
    border-radius: 5px;
}

.form--input {
    border: 1px solid #D5D4D8;
    border-radius: 0.3125rem;
    font-family: inherit;
    text-indent: 5px;
}

这是我的 HTML 代码：

export default function Input() {
    return (
        <div>
            <div className="form">
                <input type="text" className="form--input" placeholder="Top text" />
                <input type="text" className="form--input" placeholder="Bottom text" />
                <button className="form--submit" onClick={getMemeImage}> Get a new meme image </button>
            </div>
            <img src="https://i.imgflip.com/3lmzyx.jpg"className="meme--image" />
        </div>
    )
}

【问题讨论】：

这能回答你的问题吗？ Center image using text-align center?

标签： html css

【解决方案1】：

只需给图像一些高度宽度并自动设置边距。


.meme--image{
   width:400px;
   margin: 0 auto;
}

【讨论】：

【解决方案2】：

为img 元素添加一个div 包装器，其类为image-container，并具有以下样式。

<div className="image-container">
     <img src="https://i.imgflip.com/3lmzyx.jpg" className="meme--image" />
</div>

.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100vh - 150px);
}

高度减去150px 是为了顶部的空间。

【讨论】：

@22bash，看看这个！！