如何在一个div内水平居中对齐跨度

-1

我有一个DIV和一个SPAN。我想将SPAN水平居中放置在DIV中。如何在一个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

我该如何解决？

来源

2014-03-03 Si8

您是否尝试过跨度显示：inline-block;然后使div文本对齐：中心; ？ –

为什么'socialIcons'设置为'display：table'，然后还包含一个表格？ –

好吧，它适用于我（http://jsfiddle.net/86s8C/）。我猜你的问题是在你的代码中的其他地方.. – Sebsemillia

你需要做的跨度显示：inline-block的;并使div文本对齐：中心;或者使量程显示：inlin-block;和余量：0自动;

来源

2014-03-03 22:02:40

没有...不工作。我不知道这个表是不是干涉了任何事情：/ – Si8

请看看这里：http://jsfiddle.net/3JE3G/ –

我看到了很多例子，但仍然不工作。我会仔细看看细节。谢谢。， – Si8

display: inline-block; margin: 0px auto;可能是你在找什么。

来源

2014-03-03 21:59:36

不可以。尝试已经但它不工作：/ – Si8

当页面加载时使用jQuery显示headerRibbon时，显示是块。也许这就是它导致问题的原因？ – Si8

试试这个：

<!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>

来源

2014-03-03 22:00:56 les

奇怪的是，它不工作：/ – Si8

你想要图像均匀间隔？ – les

如果是这样，我有你的修复。我得到它的工作，但你必须从1％（我没有图像文件）的宽度改变到任何你想要的。 – les

如何在一个div内水平居中对齐跨度

回答

相关问题