-3

I want to make the div appear in center but it is always at the left side. I am using bootstrap for screen compatibility, so I didn't work with the adjusting of the left and right margins. What went wrong in the code?

Please help!

<div id="div1" 
style="display: inline-block; 
position: absolute; margin: 20px auto; 
width: 1140px; 
height: 442px; 
overflow: hidden;">
ajp15243
  • 7,704
  • 1
  • 32
  • 38
user1023
  • 39
  • 1
  • 7
  • 2
    Welcome! A [codepen](http://codepen.io) or [jsfiddle](http://jsfiddle.net) will go a long way to getting people into helping you! :) – Damon Apr 17 '15 at 03:48
  • 1
    possible duplicate of [How do I center float elements?](http://stackoverflow.com/questions/4767971/how-do-i-center-float-elements) – Slava Knyazev Apr 17 '15 at 03:48

4 Answers4

2

Just remove the position: absolute; and display: inline-block styles, and it'll work.

Richard Shi
  • 625
  • 1
  • 9
  • 21
  • @user1023 For solely what you showed us, it works. You'll need to provoide more information if this doesn't work for you. Id est, can you tell us what it's for, its parent, and its children? – Richard Shi Apr 17 '15 at 04:21
  • it's for an image slider. – user1023 Apr 17 '15 at 05:13
  • @user1023 That doesn't help me figure out why it doesn't work for you. You'll need to provide more of the code. – Richard Shi Apr 18 '15 at 02:33
0

https://jsfiddle.net/mkb8gy6g/

Remove display:inline-block; & position:absolute;

apaul
  • 16,092
  • 8
  • 47
  • 82
Dale
  • 580
  • 7
  • 20
0

If you do not specify top, left, right and bottom values once you have applied position: absolute, it inherits from its parent or browser default will be applied. That is why you see your div is always in left. In this case what you could do is

  1. You could align it using top, left and other attributs
  2. you could remove position: absolute, make it inline-block and apply text-align: center
It worked yesterday.
  • 4,507
  • 11
  • 46
  • 81
-2

Try this,

Use text-align:center; in your css 

<div id="div1" 
style="display: inline-block; 
position: absolute; margin: 20px auto; 
width: 1140px; 
text-align:center;
height: 442px; 
overflow: hidden;"> Test </div>
USER10
  • 939
  • 11
  • 28