div not centered in IE but works fine in chrome and firefox
Question
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
4 answers
solution1
2 ACCPTED 2015-03-27 13:40:37
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%);
solution2
1 2015-03-27 13:40:26
尝试为IE9 +添加transform: translate(-50%, -50%)和-ms-transform: translate(-50%, -50%)到.jumbotron 。
solution3
0 2015-03-27 13:53:20
- Never ever use the
<center>tags. Use the css equivalent instead:text-align: center; - You forgot the
-ms-prefixed translate property. - 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>
solution4
0 2015-03-27 14:00:15
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.