时间戳

首页 > 解决方案 > 在反应列中完美居中图像

javascript - 在反应列中完美居中图像

问题描述

我很难在引导程序 4 列中对齐一些图像。我尝试使用 CSS 属性 text-align: center，这将使图像水平居中。我的列占用了大量的视口，所以我还需要图像垂直居中。

这是我的反应组件返回的内容。class="img13" 是我试图居中的。

<div id="border">
        <div class="container">
            <div class="row tower">
                <div class="col-sm-3 towers" id="tower1">
                    <div class="tower-icon"><img class="img13" src={character}></img></div>
                </div>
            </div>
        </div>
    </div>

这是我目前拥有的 CSS。它将图像硬编码为在一列中居中，但如果我更改站点的显示大小或使用不同的图像，它不再居中。.row{ 显示：弹性；}

.towers {
    color: white;
    height: 100%; 
    position: relative;
}
.tower-icon{
    margin-top: 52%;
    margin-bottom: 48%;
    
}
.img13{
    height: auto;
    width: 100%;
}

此处的开始菜单是组件外观的附加图片。背景是柱子，'开始'图片是class="img13"

标签： javascriptcssreactjs

解决方案

您可以利用 flexbox 和自动居中对齐.tower-icondiv 中的所有内容，如下所示：

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

请注意，徽标将在具有.col-sm-3类的列的约束范围内水平和垂直居中。

测试链接：

https://jsbin.com/sekosibizo/edit?css,输出

推荐阅读