Come posizionare gli elementi in base al centro di una pagina?

Ho 2 elementi HTML

TITLE1

TITLE2

Voglio posizionare questi elementi una quantità X di pixel lontano dal centro della pagina. Per esempio mi piacerebbe mettere TITLE1 50 px a sinistra del centro e TITLE2 50 px (stessa quantità di spazio) a destra del centro. Come visto di seguito:

  TITLE1 |  TITLE2 (centre) 

Puoi fare in questo modo:

 #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;} 
 

TITLE1

TITLE2

Un altro approccio:

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

TITLE1

TITLE2

Se conosci la larghezza degli “Elementi titolo”, potresti anche usare la position absolute; left:50% position absolute; left:50% , quindi un left-margin per spostare una casella di boxWidth+50 a destra e l’altra boxWidth+50 a sinistra:

 #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/


Approccio assoluto senza larghezza fissa 🙂

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; } 
 body{ text-align: center; } #prev,#curr{ display: inline; } #prev{ position: relative; left: -50px; } #curr{ position: relative; left: 50px; } 
     JS Bin   

TITLE1

TITLE2