元素没有正确对齐？答案

【问题标题】：Elements are not aligning properly?元素没有正确对齐？
【发布时间】：2019-12-13 11:56:44
【问题描述】：

我正在尝试建立一个投资组合网站，但在元素对齐方式方面遇到了一些问题。我有一个用于 className 的 div，以并排包含顶行元素。他们没有很好地对齐。一张图片在最左边，一张底部和中间的图片没有居中。我不确定问题是什么。蟒蛇标志位于底部。背景并不意味着是黑色的，但我拥有它是为了更好地可视化。

Js 文件：

export class ContentWrap extends React.Component{

    render(){
        return(
            <div className="WholePage">
                <img id="apple" src={appleLogo}/>
                <img id="android" src={androidLogo}/>
                <img id="python" src={pythonLogo}/>
            </div>
        )
    }

}

CSS：

.WholePage{
    height: 800px;
    width: 100%;
    border-radius: 25px;
    background-color: black; 
}

#apple{
    height: 400px;
    width: 400px;
    margin-top: auto;
    margin-bottom: auto;
    padding: 10px;
}

#android{
    height: 400px;
    width: 400px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
    padding: 10px;
}

#python{
    height: 300px;
    width: 300px;
    margin-right: 40%;
    margin-left: 40%;
    margin-top: 50%;
    margin-bottom: 50%;
    padding: 10px;
}

【问题讨论】：

问题出在哪里？

标签： html css reactjs jsx

【解决方案1】：

我想知道您为什么要为图像分配单独的样式。让它们使用相同的样式以提供一致性和一致性不是更好吗？

无论如何，您的 android id 样式与所有汽车都是多余的。

只需执行以下操作：

.WholePage{
  display: flex;
  justify-content:center;
  align-items:center;
}

.WholePage-icons{
  width: 30%;
}

#apple{
  justify-self: flex-start;
}

#python{
  justify-self: flex-end;
}

【讨论】：