开发者

How to align a flash movie to center with "overflow: hidden"?

开发者 https://www.devze.com 2022-12-09 21:40 出处:网络
I have a wide flash movie (to fit in more screen resolution). I would like to align it to a center of a (for example) 85%-wide div (and the overflowing flash remains hidden).

I have a wide flash movie (to fit in more screen resolution).

I would like to align it to a center of a (for example) 85%-wide div (and the overflowing flash remains hidden).

How could i do that?

edit2:

I'd like to do this with css (and not with javascript):

(I've replaced the flash with text to make the post shorter, the problem is the same)

<html>
<head>
<style>
#div {
    width: 20%;
    overflow: hidden;
    text-align: center;
    background-color: lightblue;
}
#flash {
    width: 400px;
    background-color: blue;
    position: relative;
    top: 0px;
    margin: 0 auto;
}
<开发者_StackOverflow中文版;/style>
<script src="jquery-1.3.2.min.js"></script>
<script>
function center() {
    var flash = parseInt($("#flash").css('width'));
    var div = parseInt($("#div").css('width'));
    if (flash > div) {
        var right = ((flash - div) / 2) + "px";
        $("#flash").css("right", right);
    }
}
$(window).resize(function(){
    center();
});
$(function(){
    center();
});
</script>
</head>
<body>
<div id="div">
<div id="flash">texttexttexttexttext-[CENTER]-texttexttexttexttext</div>
</div>
</body>
</html>


You can't align divs by using text-align, because of the fact that divs are block elements. What you can do, if you specify a width for both the container div and the flash div, is set the left and right margins to auto.

#flash {
 width: 50%;
 margin: 0 auto 0 auto;
}


Seems pretty straightforward, maybe im missing something?

on the div:

div {
    width:85%;
    overflow:hidden;
    text-align:center
}

if that doesn't work can you show us your code

0

精彩评论

暂无评论...
验证码 换一张
取 消