如何在一個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內水平居中對齊跨度

回答

相關問題