Question

在下面的代码中，我希望按钮和facebook共享链接放在<span>元素下面，但按钮应该正好位于<span>元素下方的中心。由于facebook共享和按钮都包含在<div>标记中，如何引用<span>元素中的<button>元素，以便将按钮放入相对于<span>元素的中心。共享链接应位于按钮的最左侧，但位于同一行。

<body id="page-background">
    <div class="background" id="page">
        <div class="container-fluid">
            <div id="quote" class="well position-message quote-shape">
			  <span></span>
            </div>
            <div class="row">
		        <div id="share" class="col text-left">
                  <a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
                   <i class="fa fa-facebook-official"></i> Share
                  </a>
                </div>
		        <div class="col-sm-6 text-left">
                    <button type="button" id="click" class="btn btn-outline-secondary btn-circle button-shape">
			         <i class="fa fa-refresh fa-2x"></i>
                    </button>
                </div>
            </div>
	    </div>
	</div>
</body>

下面是我的页面的快照

Answer 1

如果您知道所有元素的宽度，可以使用边距来设置，相对于您的共享宽度设置反向边距链接和跨度宽度。

如果您不知道宽度或页面是动态的，您可以使用JavaScript / jQuery。将元素保存到变量，获取它们的宽度，然后执行相同的数学运算，就好像它们是静态宽度一样。

静态示例：https://codepen.io/anon/pen/EoLWZY

<style>
#page{
margin: 0 auto;
display: block;
width: 600px;
padding: 20px;
}
#emptySpan{
display: block;
width: 500px;
height: 50px;
background-color: yellow;
margin: 0 auto;
text-align: center;
line-height: 45px;
}
.row{
text-align: center;
}
#share{
display: inline-block;
position: absolute
background-color: red;
width: 50px;
float:left;
}
#click{
display: inline-block;
position: absolute;
width: 200px;
margin: 10px -150px;
}
</style>

<body id="page-background">
<div class="background" id="page"> 
<div class="container-fluid">
<div id="quote" class="well position-message quote-shape">
    <span id="emptySpan">empty span</span>
</div>
<div class="row">
<div id="share" class="col text-left">
  <a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
  <i class="fa fa-facebook-official"></i>Share</a> 
</div>
<div class="col-sm-6 text-left">
<button type="button" id="click" class="btn btn-outline-secondary btn-circle button-shape">
    <i class="fa fa-refresh fa-2x">Button CTA</i>
</button>
</div> 
</div>
</div>  
</div>
</body>

如何相对于另一个元素定位元素

1 个答案: