如何定位基于页面中心的元素？ [英] How to position elements based off the center of a page?

问题描述

我有2个HTML元素

 < h1 id =prev> TITLE1< / h1& 
< h1 id=curr> TITLE2< / h1> 
  

我想将这些元素放置在离页面中心X个像素的位置。例如，我想把 TITLE1 50像素放在中心的左边， TITLE2 50像素的空间）在中心的右边。如下所示：

  TITLE1< --- 50px  - > | < --- 50px  - > TITLE2 
（center）
  

解决方案

这样：

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

>

I have 2 HTML elements

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

I want to position these elements an X amount of pixels away from the centre of the page. For example I would like to to put TITLE1 50 px to the left of the center and TITLE2 50 px(same amount of space) to the right of the center. As seen below:

 TITLE1<---50px--> |  <---50px--> TITLE2
                (centre)

解决方案

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>

这篇关于如何定位基于页面中心的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！