Practical solution to center vertically and horizontally in HTML that works in FF, IE6 and IE7

后端未结

关注

 5  546

What can be a practical solution to center vertically and horizontally content in HTML that works in Firefox, IE6 and IE7?

Some details:

I am lookin

相关标签:

5条回答

Happy的楠姐

2020-12-20 21:45

Is this what you are trying to accomplish? If not, please explain what is different than the image below?

0 讨论(0)
发布评论:

提交评论
- 加载中...
夕颜

2020-12-20 21:57
For this issue you can use this style
```
#yourElement {
   margin:0 auto;
   min-width:500px;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

广开言路

2020-12-20 21:58

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Centering</title>
 <style type="text/css" media="screen">
  body, html {height: 100%; padding: 0px; margin: 0px;}
  #outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
  #middle {vertical-align: middle}
  #centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
 </style> 
</head>
<body>
 <table id="outer" cellpadding="0" cellspacing="0">
  <tr><td id="middle">
   <div id="centered" style="border: 1px solid green;">
    Centered content
   </div>
  </td></tr>
 </table>
</body>
</html>

Solution from community.contractwebdevelopment.com also is a good one. And if you know height of your content that needs to be centered seems to be better.

0 讨论(0)

情话喂你

2020-12-20 22:06

From http://www.webmonkey.com/codelibrary/Center_a_DIV

#horizon        
    {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    display: block
    }

#content    
    {
    width: 250px;
    height: 70px;
    margin-left: -125px;
    position: absolute;
    top: -35px;
    left: 50%;
    visibility: visible
    }

<div id="horizon">
   <div id="content">
      <p>This text is<br><emphasis>DEAD CENTRE</emphasis ><br>and stays there!</p>
   </div><!-- closes content-->
</div><!-- closes horizon-->

0 讨论(0)

花落未央

2020-12-20 22:07
For horizontal:
```
<style>
body
{
    text-align:left;
}
.MainBlockElement
{
    text-align:center;
    margin: 0 auto;
}
</style>
```
You need the text-align:left in the body to fix a bug with IE's rendering.
0 讨论(0)
发布评论:

提交评论
- 加载中...