javascript - JQuery - 如何在网页中心放置一个带有 的

Question

我在为我的 <p> 添加背景图片时遇到问题标记到网页的中心。

脚本

$(function() {
    $('ul.nav a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 1000, "easeInOutExpo");
        event.preventDefault();
    });
    // $("#logo") = my <p> tag containg the background image
    var imgTop = ($(window).height() - $("#logo").css("height")) / 2;
    var imgLeft = ($(window).width() - $("#logo").css("width")) / 2;

    $("#logo").css({
        "top": imgTop,
        "left": imgLeft
    });

    setInterval(function() {
        $("#logo").fadeTo(2000, 0.7).fadeTo(2000, 1);
    }, 0);
});

CSS

*{
    margin:0;
    padding:0;
}

body{
    background: #100061;
    font-family:Georgia;
    /*font-size: 34px;*/
    letter-spacing:-1px;
    width:16000px;
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    overflow: hidden;
    height: 100%;
}

.section{
    margin:0px;
    bottom:0px;
    width:4000px;
    float:left;
    height:100%;
}
.section h2{
    margin:50px 0px 30px 50px;
}

.section p{
    margin:20px 0px 0px 50px;
    width:600px;
}

.section ul{
    list-style:none;
    margin:20px 0px 0px 300px;
}

#logo{
    width: 500px;
    height: 194px;
    position: absolute;
    top: 0;
    left: 0;
}

HTML

<div class="section black" id="home">
    <img src="images/logo.png" id="logo" />
    <ul class="nav">
        <li>
            <a href="#home">Home</a>&nbsp;&nbsp;
            <a href="#aboutUs">About Us</a>&nbsp;&nbsp;
            <a href="#contactUs">Contact Us</a>&nbsp;&nbsp;
            <a href="#products">Products</a>&nbsp;&nbsp;
        </li>
    </ul>
</div>
<div class="section white" id="aboutUs">
    <h2>About Us</h2>
    <p>
        ‘A fathomless and boundless deep,
        There we wander, there we weep;
        On the hungry craving wind
        My Spectre follows thee behind.
    </p>
    <ul class="nav">
        <li>
            <a href="#home">Home</a>&nbsp;&nbsp;
            <a href="#aboutUs">About Us</a>&nbsp;&nbsp;
            <a href="#contactUs">Contact Us</a>&nbsp;&nbsp;
            <a href="#products">Products</a>&nbsp;&nbsp;
        </li>        
    </ul>
</div>
<div class="section black" id="contactUs">
    <h2>Contact Us</h2>
    <p>
        ‘He scents thy footsteps in the snow
        Wheresoever thou dost go,
        Thro’ the wintry hail and rain.
        When wilt thou return again?
    </p>
    <ul class="nav">
        <li>
            <a href="#home">Home</a>&nbsp;&nbsp;
            <a href="#aboutUs">About Us</a>&nbsp;&nbsp;
            <a href="#contactUs">Contact Us</a>&nbsp;&nbsp;
            <a href="#products">Products</a>&nbsp;&nbsp;
        </li>
    </ul>
</div>
<div class="section white" id="products">
    <h2>Products</h2>
    <p>
        ‘He scents thy footsteps in the snow
        Wheresoever thou dost go,
        Thro’ the wintry hail and rain.
        When wilt thou return again?        
    </p>
    <ul class="nav">
        <li>
            <a href="#home">Home</a>&nbsp;&nbsp
            <a href="#aboutUs">About Us</a>&nbsp;&nbsp;
            <a href="#contactUs">Contact Us</a>&nbsp;&nbsp;
            <a href="#products">Products</a>&nbsp;&nbsp;
        </li>
    </ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="jquery.min.js"></script>        
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="script.js"></script>

Fiddle

Answer 1

如果段落中有图像元素，则需要以不影响段落内容的方式放置图像: pimg{ position:absolute； 顶部:50%； 左:50%； 边距:-75px 0 0 -75px； 向左飘浮;

为了绝对定位图像，必须使用position: relative 相对定位容器。这是一个例子: p{ 高度:180px； 宽度:40%； position:relative； 边框:1px 纯红色；

最后，标记:

<p> 
    <img src="http://placekitten.com/150/150" alt="nice kitten" />
</p>

但是，更好的方法是使用 css 显示图像:background: url(http://placekitten.com/150/150) no-repeat center center;。因此标记会简单得多:

<div id="logo"></div>

div 的 CSS: ＃标识{ 背景:url(http://placekitten.com/150/150) 无重复中心中心； 高度:180px； 宽度:40%； 边框:1px 纯蓝色；

...或 http://jsfiddle.net/Er2Tw/