0

Welcome! I got a bit problem while building my first website project. I have two container(container1,container2(used for two background-image horizontally)). Now, I want to align the text(h1 element) to the middle of container1 both x and y axis.I want to do it two times(container1 | container2). Finally, I draw an ascii art from it. :)

***** container1 ***** ****** container2 ***** * * * * * <h1 element 1> * * <h1 element 2> * * * * * *********************** ***********************

Thank you for help and please,ignore this bad grammar.

LeFizzy
  • 29
  • 1
  • 6

2 Answers2

0
<html>
<head>
    <style>
        #center1{
         height:100%;
         display:flex;
         } 

         #center2{
         margin:auto;
         }        
    </style>
</head>
<body>
    <div id="center1">
    <span id="center2">Hello</span>    
    </div> 
</body>
</html>

This is how you can align text at the center(horizontally and vertically) inside a div.It's working.

pramod kumar
  • 275
  • 2
  • 12
  • Very nice code, solved my problem. Can you show an example how to align another text below the tag? Can I add some plus/minus pixels to auto property? (LIke: auto-2px) Thank you if you read it. – LeFizzy Aug 05 '16 at 17:21
  • you want another text to be exactly under the already present span tag or are you mentioning the design in question? – pramod kumar Aug 05 '16 at 19:26
-3

margin: auto; for vertical align , tex-align:center; for horizontal align

ziuzea
  • 10
  • 1