Menu icon Foundation
Problem with getting it centered.

Hey,

I got a problem that drives me nuts. I have used the Jquery orbit slider in my website and then tried to center it to see it centered in the page. when I take a look at it in the editor it's all ok but when opening it with firefox it's just completely on the left, I tried everything, looked at google for answers but the darn thing just won't center. what could be the problem?

centerOrbitjqueryfirefox

Hey,

I got a problem that drives me nuts. I have used the Jquery orbit slider in my website and then tried to center it to see it centered in the page. when I take a look at it in the editor it's all ok but when opening it with firefox it's just completely on the left, I tried everything, looked at google for answers but the darn thing just won't center. what could be the problem?

Rafi Benkual over 4 years ago

Could you share your code or a link to the site so we can help you more?

Just testing in Codepen it is centered well.

http://codepen.io/rafibomb/pen/xbyJyB

Uncle Goose over 4 years ago

<link rel="stylesheet" href="orbit-1.2.3.css">
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery.orbit-1.2.3.min.js"></script>  
<script type="text/javascript">      
  $(window).load(function() {        
  $('#featured').orbit({directionalNav: false, bullets: false, animation: 'fade', advanceSpeed: 5000});
  $('#featured').css('width', '900px');
    $('#featured').css('height', '400x');


  });  
</script>
</head>
<body background="#ffffff">

<div style="text-align: center"><font color="#050000" face="pt sans narrow" size=+3>JOHANNA VAN OVERMEIR</font></div>

<div style="text-align: center"><div style="text-align: center"><div class="container">  
  <div id="featured">       
  <div class="content" style="">        
  </div>      

  <img src="slideshow/asohn01.jpg" data-caption="#asohn"/>
  <img src="slideshow/ltw01.jpg" data-caption="#ltw"/>
  <img src="slideshow/hif0913.jpg" data-caption="#hif"/>
  <img src="slideshow/crossover01.jpg" data-caption="#crossover"/>
  <img src="slideshow/is01.jpg" data-caption="#is"/>
  <img src="slideshow/shootingbooks01.jpg" data-caption="#shootingbooks"/>
  <img src="slideshow/tothemoon01.jpg" data-caption="#tothemoon"/>               
  <img src="slideshow/asftu01.jpg" data-caption="#asftu"/>



<span class="orbit-caption" id="asohn">Structure of human nature</span>
<span class="orbit-caption" id="ltw">Lick thy wounds</span>
<span class="orbit-caption" id="hif">HIF 1304</span>
<span class="orbit-caption" id="crossover">Crossover</span>
<span class="orbit-caption" id="is">I SWEAR</span>
<span class="orbit-caption" id="shootingbooks">Shooting books</span>
<span class="orbit-caption" id="tothemoon">TO THE MOON</span>
<span class="orbit-caption" id="asftu">A SONG FOR THE UNIVERSE</span></div>
</body>
</html> 

Uncle Goose over 4 years ago

OK, Never mind, I solved it myself.

<div style="text-align: Center">

Should be

<div align="Center">