How to make a div center align in HTML [duplicate]

后端未结

关注

 4  943

爱一瞬间的悲伤

相关标签:

4条回答

萌比男神i

2021-02-01 12:30

how about something along these lines

<style type="text/css">
  #container {
    margin: 0 auto;
    text-align: center; /* for IE */
  }

  #yourdiv {
    width: 400px;
    border: 1px solid #000;
  }
</style>

....

<div id="container">
  <div id="yourdiv">
    weee
  </div>
</div>

0 讨论(0)

悲&欢浪女

2021-02-01 12:39
```
<!DOCTYPE html>
<html>
  <head>
    <title>Center</title>
  </head>
  <body>

    <div style="text-align: center;">
      <div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">This DIV is centered</div>
    </div>

  </body>
</html>
```
Tested and worked in IE, Firefox, Chrome, Safari and Opera. I did not test IE6. The outer text-align is needed for IE. Other browsers (and IE9?) will work when you give the DIV margin (left and right) value of auto. Margin "0 auto" is a shorthand for margin "0 auto 0 auto" (top right bottom left).

Note: the text is also centered inside the inner DIV, if you want it to remain on the left side just specify text-align: left; for the inner DIV.

Edit: IE 6, 7, 8 and 9 running on the Standards Mode will work with margins set to auto.
0 讨论(0)
发布评论:

提交评论
- 加载中...
南笙

2021-02-01 12:42
I think that the the align="center" aligns the content, so if you wanted to use that method, you would need to use it in a 'wraper' div - a div that just wraps the rest.

text-align is doing a similar sort of thing.

left:50% is ignored unless you set the div's position to be something like relative or absolute.

The generally accepted methods is to use the following properties
```
width:500px; // this can be what ever unit you want, you just have to define it
margin-left:auto;
margin-right:auto;
```
the margins being auto means they grow/shrink to match the browser window (or parent div)

UPDATE

Thanks to Meo for poiting this out, if you wanted to you could save time and use the short hand propery for the margin.
```
margin:0 auto;
```
this defines the top and bottom as 0 (as it is zero it does not matter about lack of units) and the left and right get defined as 'auto' You can then, if you wan't override say the top margin as you would with any other CSS rules.
0 讨论(0)
发布评论:

提交评论
- 加载中...
执笔经年

2021-02-01 12:44
it depends if your div is in position: absolute / fixed or relative / static

for position: absolute & fixed
```
<div style="position: absolute; /*or fixed*/;
width: 50%;
height: 300px;
left: 50%;
top:100px;
margin: 0 0 0 -25%">blblablbalba</div>
```
The trick here is to have a negative margin half the width of the object

for position: relative & static
```
<div style="position: relative; /*or static*/;
width: 50%;
height: 300px;
margin: 0 auto">blblablbalba</div>
```
for both techniques, it is imperative to set the width.
0 讨论(0)
发布评论:

提交评论
- 加载中...

热议问题