How do you easily horizontally center a
using CSS? [duplicate]

前端未结

关注

 22  2533

醉话见心

相关标签:

22条回答

情深已故

2020-11-22 02:49
In your html file you write:
```
<div class="banner">
  Center content
</div>
```
your css file you write:
```
.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}
```
works for me.
0 讨论(0)
发布评论:

提交评论
- 加载中...
温柔的废话

2020-11-22 02:52
Usage of margin-left:auto and margin-right:auto may not work in certain situations. Here is a solution what will always work. You specify a required width and than set a left-margin to a half of the remaining width.
```
    <div style="width:80%; margin-left:calc(10%);">
        your_html
    </div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
孤独总比滥情好

2020-11-22 02:55
```
margin: 0 auto;
```
as ck has said, min-width is not supported by all browsers
0 讨论(0)
发布评论:

提交评论
- 加载中...

终归单人心

2020-11-22 02:55

After nine years I thought it was time to bring a new version. Here are my two (and now one) favourites.

Margin

Set margin to auto. You should know the direction sequence is margin: *top* *right* *bottom* *left*; or margin: *top&bottom* *left&right*

aside{
    display: block;
    width: 50px;
    height: 100px;
    background-color: green;
    float: left;
}

article{
    height: 100px;
    margin: 0 0 0 50px; /* 50px aside width */
    background-color: grey;
}

div{
  margin: 0 auto;
  display:block;
  width: 60px;
  height: 60px;
  background-color: blue;
  color: white;
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <aside>
        </aside>
        <article>           
                <div>The div</div>
        </article>
    </body>
</html>

Center: Depricated, don't use this!

Use <center></center> tags as a wrap around your <div></div>.

Example:

aside{
    display:block;
    background-color:green;
    width: 50px;
    height: 100px;
    float: left;
}

center{
    display:block;
    background-color:grey;
    height: 100px;
    margin-left: 50px; /* Width of the aside */
}

div{
    display:block; 
    width: 60px; 
    height: 60px; 
    background-color:blue;
    color: white;
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <aside>
        </aside>
        <article>
            <center>
                <div>The div</div>
            </center>
        </article>
    </body>
</html>

0 讨论(0)

死守一世寂寞

2020-11-22 02:56

Add this class to your css file it will work perfectly steps to do:

1) create this first

<div class="center-role-form">
  <!--your div (contrent) place here-->
</div>

2) add this to your css

.center-role-form {
    width: fit-content;
    text-align: center;
    margin: 1em auto;
    display: table;
}

0 讨论(0)

长情又很酷

2020-11-22 02:57
```
.center {
   margin-left: auto;
   margin-right: auto;
}
```
Minimum width is not globally supported, but can be implemented using
```
.divclass {
   min-width: 200px;
}
```
Then you can set your div to be
```
<div class="center divclass">stuff in here</div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

热议问题

How do you easily horizontally center a using CSS? [duplicate]

How do you easily horizontally center a
using CSS? [duplicate]