Question

我在sencha extjs应用程序中有一个容器，该容器的左侧是img div。我希望它居中，以便旋转（因为我已经使图像适合其最长尺寸）。

 TCollections.CreateSortedObjectList<TMyClass>(TMyClass.MyComparer());

我尝试过将所有这些都添加进去，因为关于SO的类似问题

vertical-align：中间;
  文本对齐：居中；
  显示：块

包含它们的其他extjs容器有可能正在发生变化。

Answer 1

您尝试过margin: auto;吗？您也可以将flex用于外部组件：

display: flex;
justify-content: center;

此外，如果外部组件的尺寸固定且为position: relative，则可以使用

position: absolute;
left: 50%;
transform: translateX(-50%);

Answer 2

您为什么不使用HTML <center>标签？

.rotate90 {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

<div style="width: 516px; overflow: auto !important; right: auto; left: 0px; margin: 0px; top: 30px; height: 429px; background-color:red;">
<center><img src="https://www.gravatar.com/avatar/ad942ab5a7f58014ab966ae26cb91f87?s=48&d=identicon&r=PG&f=1" class="rotate90"/></center>
</div>

在div中居中img

2 个答案: