Horizontal and vertical center text in html [duplicate]

前端未结

关注

 5  1207

孤独总比滥情好

相关标签:

5条回答

终归单人心

2020-12-20 03:34
Horizontal centering of a block element is traditionally done this way:
```
div.inner { margin: 0 auto; }
```
Note: the above won't work with IE in quirks mode so always put a DOCTYPE at the top of your document to force it into standards compliant mode.

Vertical centering is much more tedious. See Vertical Centering in CSS
0 讨论(0)
发布评论:

提交评论
- 加载中...
广开言路

2020-12-20 03:42

there is no direct vertical centering for div content in CSS, however there are indirect ways of achieving it. http://phrogz.net/CSS/vertical-align/index.html

also many similar questions in SO. How to vertically center a div for all browsers?

0 讨论(0)
发布评论:

提交评论
- 加载中...

Happy的楠姐

2020-12-20 03:43

If you want to get VERTICAL centering, I would suggest to use a table inside the DIV (as suggested by Cletus above other ways might be tedious).

div.centered table {margin: 0 auto;} /* no width needs to be specified for table */
div.centered table td {vertical-align: middle;} /* replace this with vertical-align: top; to disable vertical centering */


<!-- borders added only to help understanding -->
<div class="centered" style="border: 1px solid #cccccc;">
    <table style="border: 1px solid #ff0000;">
       <tbody>
          <tr><td>
             Some text here
          </td></tr>
       </tbody>
    </table> 
</div>

If you are only interested in HORIZONTAL centering (no vertical) you can use only DIV:

div.centered div {margin: 0 auto; width: 300px;} /* some width MUST be specified to center a DIV. */

<!-- borders added only to help understanding -->
<div class="centered" style="border: 1px solid #cccccc;">
    <div style="border: 1px solid #ff0000;">
       Some text here
    </div> 
</div>

As you might have noticed in order to horizontally align a DIV inside a DIV you also need to specify a fixed width for the inner DIV. This might be somehow not what you want to do, so it might be easier to use always the 1st solution (the one with TABLE) and simply remove the "vertical-align: middle;" when you want to get only horizontal centering.

I tested this using document with:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

on IE7, FF 3.6, SAFARI 4.0.4

0 讨论(0)

天涯浪人

2020-12-20 03:53

In case you have to use only one line of text and parent div has fixed height use line-height property. Suppose parent height is 500px then use CSS line-height: 500px; for text.

0 讨论(0)
发布评论:

提交评论
- 加载中...

臣服心动

2020-12-20 03:59

Without using javascript (ala something like thickbox, etc. for positioning photos/captions centered), the closest I could come to was this:

<body style="height:200px; min-height:800px;">
   <div style="background: url('background.png') no-repeat center; height:100%;">
      <div style="text-align: center; position:relative; top:50%; color:#fff;">
         Some text here.
      </div>
   </div>
</body>

Note that I had to specify some sort of height for the container (in this case the BODY but it could also have been applied to the wrapper DIV I think). In Explorer 6, you can set the BODY height to 100% but in Firefox this doesn't work and probably won't work in other modern browsers.

EDIT:

Found a better solution:

<style type="text/css">
    html, body {height:100%;}
</style>
</head>
<body>
    <div style="background: url('background.png') no-repeat center; height:100%;">
        <div style="text-align: center; position:relative; top:50%; color:#fff;">
            Some text here.
        </div>
    </div>
</body>

0 讨论(0)

热议问题