<a> tag with position:relative and auto margins won&#39;t change with viewport change

Question

I have a simple <a> tag in a <div>. I have set its width to be less than its parent element width, and its margin-left:auto and margin-right:auto. I have applied similar stylings to other sibling elements in the <div> which have the desired behavior of moving around when I change the viewport in relation to the left and right margins. However I have this single <a> which doesn't seem to be setting its margin-left and margin-right based on changes to the viewport.

Here is the fiddle:

the <a> is the only <a> wrapping the only <button>

https://jsfiddle.net/6k0o4zps/4/

Answer 1

你应该摆脱left:150px，并将<a>作为阻止级别。

你只需要在案件中定位.front-page-calculator a。

https://jsfiddle.net/6k0o4zps/11/

.front-page-calculator a {
  position: relative;
  /* left: 150px; */
  top: -140px;
  width: 160px;
  margin-left: auto;
  margin-right: auto;
  display: block; /*added*/
}

Answer 2

将display:block;添加到锚元素。在您的代码中，它设置为inline

这是一篇关于显示效果的好文章：内联细节。 http://maxdesign.com.au/articles/inline/

如果您希望元素位于视口的中心，请删除左left: 150px;