All geek questions in one place

Horizontal and vertical text of the center in html

I have a div with a background image that needs to be centered horizontally and vertically. In addition to this image, I also want to display text with 1 line, also centered horizontally and vertically.

I managed to get the image in the center, but the text is not centered vertically. I thought vertical alignment: the middle will do the trick.

Here is the code I have:

<div style="background: url('background.png') no-repeat center; width:100%; height:100%; text-align:center;"> <div style="color:#ffffff; text-align: center; vertical-align:middle;" > Some text here. </div> </div>

Any ideas?

Workaround: I really got this using a table. (Perhaps I will be damned by the infernal HTML community.) Is there a significant reason not to use this bit? I'm still interested in a solution using divs.

  <table width="100%" height="100%"> <tr> <td align="center" style="background: url('background.png') no-repeat center; color:#ffffff;">Some text here.</td> </tr> </table>
+2
source share
5 answers

Horizontal centering of a block element is traditionally performed as follows:

 div.inner { margin: 0 auto; }

Note: the above will not work with IE in quirks mode, so it always places DOCTYPE at the top of your document to make it work in standard mode.

Vertical centering is much more tedious. See Vertical Centering in CSS

+4
source

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

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

+2
source

If you need to use only one line of text, and the parent div has a fixed line height property, height. Suppose the parent's height is 500 pixels, and then use the CSS line height: 500 pixels; for text.

+1
source

Without using javascript (ala something like a thick box, etc. for positioning photos / labels in the center), the closest I could come to 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>

Please note that I needed to specify some height for the container (in this case BODY, but it can also be applied to the DIV wrapper, I think). In Explorer 6, you can set the BODY height to 100%, but in Firefox this does not work and probably will not work in other modern browsers.

EDIT:

Found the best 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
source

If you want to get VERTICAL centering , I would suggest using a table inside a DIV (as suggested by Cletus above other methods, it can 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 (without 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 may have noticed, in order to horizontally align the DIV inside the DIV, you also need to specify a fixed width for the internal DIV . It may be somehow not what you want to do, so it would be easier to always use the first solution (one with TABLE) and just remove "vertical-align: middle;" when you want to get only horizontal centering.

I checked this using the document:

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

in IE7, FF 3.6, SAFARI 4.0.4

0
source

Source: https://habr.com/ru/post/1337252/

More articles:


All Articles