CODEWITHSUNDEEP
htmlcss
Tony_89
Tony_89

Reputation: 817

div not centered in IE but works fine in chrome and firefox

I know this issue has been discussed a lot and i have read over the other questions and answers but i have not been able to solve this issue. I am using bootstrap and i want to center a div which works in chrome and firefox however in explorer the content is on the right side of the screen. I am unsure of what approach to take in order to correct the position. The css for my page is:

html,
body {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  background-color: white;
  font-family: "Verdana", Geneva, sans-serif;
}
.sRed {
  color: black;
}
u {
  color: red;
}
.container {
  position: relative;
  height: 14rem;
}
.jumbotron {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  background-color: white;
}
.fa-exclamation-triangle {
  color: red;
  padding-right: 10px;
}
<body>
  <div class="jumbotron vertical-center">
    <div class="container">
      <h1><center><i class="fa fa-exclamation-triangle fa-lg"></i><u><span class="sRed">Title</span></u></center></h1>
      <center>
        <h3>Main Content.</h3>

      </center>
    </div>
  </div>
</body>

I have included a fiddle Here. Thank you for any help and suggestions

Upvotes: 1

Views: 2503

Answers (4)

Guido Bouman
Guido Bouman

Reputation: 3275

  1. Never ever use the <center> tags. Use the css equivalent instead: text-align: center;
  2. You forgot the -ms- prefixed translate property.
  3. If you don't care about support for IE9 or lower: You can use flexbox for this as well.

html, body {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  background: black
}

.jumbotron {
  margin: auto;
  background: white;
}

.container {
  text-align: center;
}
<body>
	<div class="jumbotron vertical-center">
		<div class="container">
			<h1>Title</h1>
			<h3>Main Content.</h3>
		</div>
	</div>
</body>

Upvotes: 0

sQer
sQer

Reputation: 1151

Another way to do this:

html,
body {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  background-color: white;
  font-family: "Verdana", Geneva, sans-serif;
}
.sRed {
  color: black;
}
u {
  color: red;
}
.container {
  position: relative;
  height: 14rem;
}
.jumbotron {
  position: absolute;
  top: 50%;
  left: 50%;
  width:300px;
  height:200px;
  margin:-100px 0 0 -150px;
}

.fa-exclamation-triangle {
  color: red;
  padding-right: 10px;
}
<body>
  <div class="jumbotron vertical-center">
    <div class="container">
      <h1><center><i class="fa fa-exclamation-triangle fa-lg"></i><u><span class="sRed">Title</span></u></center></h1>
      <center>
        <h3>Main Content.</h3>

      </center>
    </div>
  </div>
</body>

Upvotes: 0

Nikolay Talanov
Nikolay Talanov

Reputation: 717

It's because you are missing normal transform property (and -ms for old browsers) http://jsfiddle.net/tvc4tv9L/2/

-moz-transform:    translate(-50%, -50%);
-o-transform:      translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

Upvotes: 2

Amar Syla
Amar Syla

Reputation: 3663

Try adding transform: translate(-50%, -50%) and -ms-transform: translate(-50%, -50%) to .jumbotron for IE9+.

Upvotes: 1

Related Questions