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

October 24, 2022 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;}

<h1 id="prev">TITLE1</h1>
<h1 id="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;
}

<div id="headers-set">
  <h1 id="prev">TITLE1</h1><h1 id="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>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1 id="prev">TITLE1</h1>
  <h1 id="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 Learning