Question

我有DIV和SPAN。我想将SPAN水平放在DIV中。

我试图将它放在headerRibbon div中，但无论我使用什么代码，它都无效。

我正在加载上面显示的移动样式表，如下所示：

<!-- default stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css" /><link rel="stylesheet" type="text/css" href="theStyles/captionStyle.css" />

<!-- mobile stylesheets
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_mobile.css" media="only screen and (max-device-width: 480px) and (min-device-width : 320px)" /><link rel="stylesheet" type="text/css" href="theStyles/captionStyle_mobile.css" media="only screen and (max-device-width: 480px) and (min-device-width : 320px)" />-->

<link rel="stylesheet" media="screen and (max-width: 480px)" href="theStyles/defaultStyle_mobile.css" /><link rel="stylesheet" media="screen and (max-width: 480px)" href="theStyles/captionStyle_mobile.css" />

<!-- if ie version 9 or less -->

<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_ie.css" /><link rel="stylesheet" type="text/css" href="theStyles/captionStyle_ie.css" />
<![endif]-->

div在页面加载时向下滑动时显示为block：

enter image description here

我该如何解决？

Answer 1

display: inline-block; margin: 0px auto;可能就是你要找的东西。

Answer 2

你需要进行跨度显示：inline-block;并使div文本对齐：中心;或制作跨度显示：inlin-block;和保证金：0自动;

Answer 3

试试这个：

<!doctype html>
<html>
<head>
<style>
#textSearch {
    display: none;
}
#imageSearch {
    display: none;
}
#extraLinks {
    display: none;
}
#socialIcons {
    background-color: #FF0000;
    display: table;
    margin: 0 auto;
    width:50%;
    margin:0 auto;
    margin-left:25%;
}
#headerRibbon {
    overflow: hidden;
    text-align: center;
    width:100%;
    text-align:center;
    display:block;
    margin:0 auto;
}
.socialIconTD {
    margin:0 10%;
    width:1%;
}
</style>
</head>
<body>
<div id="headerRibbon">
    <span id="socialIcons">
        <table cellpadding=0>
            <tr>
                <td class="socialIconTD"><a href="http://www.facebook.com/pages/test"><img alt="" title="" src="theImages/facebook_bw.png" class="fbClass" id="fb" width="25" height="25" /></a></td>
                <td class="socialIconTD"><a href="http://twitter.com/WEST"><img alt="" title="" src="theImages/twitter_bw.png" class="twClass" id="tw" width="25" height="25" /></a></td>
                <td class="socialIconTD"><a href="http://www.linkedin.com/company/65676575676?trk=tyah"><img alt="" title="" src="theImages/linkedin_bw.png" class="liClass" id="li" width="25" height="25" /></a></td>
                <td class="socialIconTD"><a href="http://www.youtube.com/user/WEST?blend=3&ob=5"><img alt="" title="" src="theImages/youtube_bw.png" class="ytClass" id="yt" width="25" height="25" /></a></td>
                <td class="socialIconTD"><a href="http://pinterest.com/wesT/"><img alt="" title="" src="theImages/pinterest_bw.png" class="ptClass" id="pt" width="25" height="25" /></a></td>
                <td class="socialIconTD"><a href="https://plus.google.com/112233755586149090-9-90-7"><img alt="" title="" src="theImages/googleplus_bw.png" class="gpClass" id="gp" width="25" height="25" /></a></td>
            </tr>
        </table>
    </span>
    <input type="text" size="30" placeholder="Searc" id="textSearch" /><img alt="Search Within" title="Search Within" src="theImages/blue_blur.png" width="22" height="22" id="imageSearch" class="imageSearch" />
</div>
</body>
</html>

如何水平居中对齐div内的跨度

3 个答案: