javascript - 添加变换比例后,我无法将部分设置为居中

标签 javascript html css

<分区>

如果我不使用 javascript 来监听调整大小的事件。有什么方法可以使 div 居中吗?

css 结构包含 3 个状态。正常,900px 以下,550px 以下。 当宽度超过 550px 时。我可以将部分设置为居中。当屏幕小于 550px 时。我使用比例缩小尺寸,然后无法将其设置为居中。

我尝试将位置更改为固定/相对、左/ float /转换原点/translateX/使用 vw/边距/填充... 是不是我必须使用 javascript 来监听窗口调整大小,然后更改该部分的 css 的 left 属性?

我的网站在 http://php-kkhchan.rhcloud.com

CSS:

    @media screen and (max-width: 900px) {
    .box {
        width: 520px;
        height: 650px;
    }

    #tabs { 
        width:520px ; height: 650px;
        position: static;
        margin: 0 auto;
        padding-top: 1em;
    }

}

@media screen and (max-width: 550px) {
    #tabs, .box {
        transform: scale(0.6,0.6);
        left: -14%;
        position: relative;
    }
}    

HTML:

    <section id="tabs">
  <article class="c_tab box" id="tab0" style="background: #A9D0F5;">
    testing
  </article>
</section>  

你也可以引用下面的jsfuddle JSfuddle

最佳答案

最后还是用javascript来处理。以下是我的解决方案。 我不确定这是否是最佳解决方案。

$(window).resize(function(){
    if ($(window).width()<=550) {
        $('#tabs').trigger('customresize');
    }
});

$('#tabs').on('customresize',function(){
    myWidth=($(window).width() - 545)/2 +'px';
    $(this).css('left',myWidth);
});

关于javascript - 添加变换比例后,我无法将部分设置为居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36707547/

相关文章:

jQuery + Css - 动态添加 css 到列表项

css - 要在标题 div 上创建可点击的按钮,我应该使用哪些标签?

javascript - Jqplot - 如何从已创建的图表中获取数组

Javascript 将变量添加到正则表达式

javascript - jQuery 无法在内联网站点上运行

javascript - React-Native 日历 : Pass date into custom function when a day is pressed

html - 如何去除 HTML5 中 <svg> 和 <td> 之间的空格?

html - 中间有图像的水平线的CSS技术

php - 如何存储用户的 session 数据

javascript - 使用带有 CSS 的 Material-UI(React) 按钮, "select all immediate children"似乎不起作用