How To Position Elements Based Off The Center Of A Page?

December 27, 2023 Post a Comment

I have 2 HTML elements

TITLE1

TITLE2

I want to position these elements an X amount of pixels away from the centre of

Solution 1:

You can do this way:

#prev {float: left; margin: 0; width: 50%; text-align: right; margin-left: -50px;}
#curr {float: right; margin: 0; width: 50%; text-align: left; text-indent: 50px;}

<h1id="prev">TITLE1</h1><h1id="curr">TITLE2</h1>

Solution 2:

Another approach:

#headers-set{
    text-align:center;
}
#prev{
    display:inline-block;
    margin-right:50px;
}
#curr{
    display:inline-block;
    margin-left:50px;
}

<divid="headers-set"><h1id="prev">TITLE1</h1><h1id="curr">TITLE2</h1></div>

Solution 3:

If you know the width of the "title Elements", you could also use position absolute; left:50% - and then a left-margin to move one box 50px to the right, and the other boxWidth+50 to the left:

#prev{
    position:absolute;
    left:50%;
    margin-left:-200px;
    width:150px;
    background:blue;
}

#curr{
    position:absolute;
    left:50%;
    margin-left:50px;
    width:150px;
    background:red;
}

https://jsfiddle.net/ordccd40/

Absolute approach without fixed width :)

https://jsfiddle.net/ordccd40/1/

#prev{
    position:absolute;
    right:50%;
    margin-right:50px;
    background:blue;
}

#curr{
    position:absolute;
    left:50%;
    margin-left:50px;
    background:red;
}

Solution 4:

body{
  text-align: center;
}
#prev,#curr{
  display: inline;
}
#prev{
  position: relative;
  left: -50px;
}
#curr{
  position: relative;
  left: 50px;
}

<!DOCTYPE html><html><head><metacharset="utf-8"><title>JS Bin</title></head><body><h1id="prev">TITLE1</h1><h1id="curr">TITLE2</h1></body></html>

this way use the least code. JSfiddle.

body{
  text-align: center;
}
#prev,#curr{
  display: inline;
}
#prev{
  position: relative;
  left: -50px;
}
#curr{
  position: relative;
  left: 50px;
}

Html5 Library