html - How to horizontally center align a span inside a div

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:

How can I fix it?

Answer 1

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;