行内元素居中text-align:center的问题

不多说代码如下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .warp
        {
            width: 960px;
            height: 800px;
            background: yellow;
            text-align: center;
        }        
            .warp img
            {
                text-align: center;
            }
    </style>
</head>
<body>
    <div class="warp">
        <img src="images/music.png" />
    </div>
</body>
</html>