javascript - 如何在 div 内旋转时保持随机输入图像居中

Question

我试图在显示图像时旋转图像，当我旋转到 90 度和 270 度时，我无法将它保持在

的中心。这是我的代码

.cn {
background: url('images/transparent.png') repeat; 
height: 200px;
position: relative;
vertical-align: middle; 
}

.east_largerwidth {
position: absolute;
-webkit-transform-origin: 75px 125px;
-moz-transform-origin: 75px 125px;
-ms-transform-origin: 75px 125px;
-o-transform-origin: 75px 125px;
transform-origin: 75px 125px;
transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
}  

.west_largerwidth {
display:block;
margin:auto;
-webkit-transform-origin: 75px 75px;
-moz-transform-origin: 75px 75px;
-ms-transform-origin: 75px 75px;
-o-transform-origin: 75px 75px;
transform-origin: 75px 75px;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
} 

这是旋转显示图像的 javascript 函数

function rotatefunction() {

    if (document.getElementById("ContentPlaceHolder1_Image1").classList.contains('east_largerwidth')) {

                 img.setAttribute('class', 'north');
                     if (hidderValue > 200) {
                         document.getElementById("ContentPlaceHolder1_Image1").style.width = "auto";
                         document.getElementById("ContentPlaceHolder1_Image1").style.height = "200px";
                     }
} else if ( document.getElementById("ContentPlaceHolder1_Image1").classList.contains('west_largerwidth')) {
             img.setAttribute('class', 'south');
                 if (hidderValue > 200) {
                     document.getElementById("ContentPlaceHolder1_Image1").style.width = "auto";
                     document.getElementById("ContentPlaceHolder1_Image1").style.height = "200px";
                 }
}

html

<div id="divBackground" class="cn" >
  <asp:Image ID="Image1" runat="server" ImageUrl="" style="height: 200px; max-  height: 200px; max-width: 100%;" class='north'/>
</div>
<div class="fileUpload btn btn-warning">
  <input id="inputFile" runat="server" type="file" name="file" onchange="previewFile()" CssClass="upload" />
</div>
<asp:Button UseSubmitBehavior="false" ID="btnRotate" runat="server" Text="Rotate" class="btn btn-warning" OnClientClick="return rotatefunction();" />

0 和 180 度旋转

90 度和 270 度旋转

任何人都可以帮助我如何将图像旋转到 90 度和 270 度时保持水平居中？谢谢。

最佳答案

center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

关于javascript - 如何在 div 内旋转时保持随机输入图像居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32961330/

Answer 1

center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}