-1

I have to display some text contents in center (both horizontally and vertically )with some background color.

I have this code 

"<h2 style="text-align:center; height:40px; background-color:#ABCDEF; color:#FFFCBA;"><span style="margin:auto;">USER LOGIN</span></h2>"

This making the text display in center horizontally but not vertically.

Any help will be great!

Thanks.

Devesh Agrawal
  • 8,982
  • 16
  • 82
  • 131

4 Answers4

1

Use padding, take the height off

<h2 style="text-align:center; background-color:#ABCDEF; color:#FFFCBA;padding:20px;">
    <span style="margin:auto;">USER LOGIN</span>
</h2>
starvator
  • 989
  • 1
  • 11
  • 26
0

Try this

<div style="width:100%; height:100%;">
    <h2 style="position:absolute;top: 50%; left: 50%;">Your text</h2> 
</div>
Harutyun Abgaryan
  • 2,013
  • 1
  • 12
  • 15
0

CSS:

h2{
  text-align:center; 
  background-color:#ABCDEF;
  color:#FFFCBA;
  height:40px;
}

span{
  line-height:40px;
}

MARKUP:

<h2 ><span>USER LOGIN</span></h2>
tbh__
  • 324
  • 3
  • 17
0

Use the code below:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100vh;
  height: 100vh;
  background: #666;
  color: #fff;
  text-align: center;
  display:table-cell;
  vertical-align:middle;
}
</style>
</head>
<body>

<div>center</div>

</body>
</html>

Get the height and width of the screen using 100vh