Question

I have a DIV and a SPAN. I would like to center the SPAN horizontally inside the DIV.

I am trying to center that inside the headerRibbon div but no matter what code I use, it's not working.

I am loading the mobile stylesheet shown above like this:

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

The div is displayed as block once it slides down on page load:

enter image description here

How can I fix it?

Was it helpful?

Solution

You will need to make the span display: inline-block; and make the div text-align: center; or make the span display: inline-block; and margin: 0 auto;

OTHER TIPS

display: inline-block; margin: 0px auto; is likely what you are looking for.

Try this:

<!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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top