Question

For some reason, this <a> tag won't align to the horizontal center. What needs to be done in order to fix this?

.button {
	display: inline-block;
	position: relative;
	padding: 10px 60px;
	  
	background-color: transparent;
	border: 3px solid black;
	color: black;
  
	text-decoration: none!important;
         	text-align: center;
	text-indent: 15px;
}

.button:before, .button:after {
	content: ' ';
	display: block;
	position: absolute;
	left: 10px;
	top: 52%;
}

/* box shape  */
.button:before {
	width: 20px;
	height: 4px;
	border-style: solid;
	border-width: 0 4px 4px;
}

<a href="#" class="button">demo</a>

Answer 1

将其包裹在具有text-align: center;的

的DIV代码中

＆＃13;

.button {
  display: inline-block;
  position: relative;
  padding: 10px 60px;
  background-color: transparent;
  border: 3px solid black;
  color: black;
  text-decoration: none!important;
  text-align: center;
  text-indent: 15px;
}

.button:before,
.button:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 10px;
  top: 52%;
}


/* box shape  */

.button:before {
  width: 20px;
  height: 4px;
  border-style: solid;
  border-width: 0 4px 4px;
}

.x {
  text-align: center;
}

＆＃13;

<div class="x"><a href="#" class="button">demo</a></div>

＆＃13;

Answer 2

使用保证金：0自动;用于居中并更改标签以显示：block;还为它添加了一个宽度。

＆＃13;

.button {
  display: inline-block;
  position: relative;
  padding: 10px 60px;
  background-color: transparent;
  border: 3px solid black;
  color: black;
  text-decoration: none!important;
  text-align: center;
  text-indent: 15px;
  width: 50px;
  display: block;
  margin: 0 auto;
}

.button:before,
.button:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 10px;
  top: 52%;
}


/* box shape  */

.button:before {
  width: 20px;
  height: 4px;
  border-style: solid;
  border-width: 0 4px 4px;
}

＆＃13;

<a href="#" class="button">demo</a>

＆＃13;

Answer 3

您必须将标记设为块元素。而不是inline-block使用display:block。并使用margin:0 auto;

进行居中

.button {
  display: block;
  position: relative;
  padding: 10px 60px;
  background-color: transparent;
  border: 3px solid black;
  color: black;
  text-decoration: none!important;
  text-align: center;
  text-indent: 15px;
}

.myButton {
  width: 150px;
  margin: 10px auto;
}

.button:before,
.button:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 10px;
  top: 52%;
}


/* box shape  */

.button:before {
  width: 20px;
  height: 4px;
  border-style: solid;
  border-width: 0 4px 4px;
}

<a href="#" class="button">demo</a>
<a href="#" class="button myButton">demo</a>

Answer 4

使用transform来做到这一点。

.button {
    left: 50%;
    transform: translateX(-50%);
}

.button {
    left: 50%;
    transform: translateX(-50%);
	display: inline-block;
	position: relative;
	padding: 10px 60px;
	  
	background-color: transparent;
	border: 3px solid black;
	color: black;
  
	text-decoration: none !important;
        text-align: center;
	text-indent: 15px;
}

.button:before, .button:after {
	content: ' ';
	display: block;
	position: absolute;
	left: 10px;
	top: 52%;
}

/* box shape  */
.button:before {
	width: 20px;
	height: 4px;
	border-style: solid;
	border-width: 0 4px 4px;
}

<a href="#" class="button">demo</a>

Answer 5

“a” - 元素包含在另一个元素中。在您的示例中，它位于Body-Element中。此元素需要使其元素居中，因此您需要设置如下规则：

body {
  text-align: center;
}

.button {
  display: inline-block;
  position: relative;
  padding: 10px 60px;
  background-color: transparent;
  border: 3px solid black;
  color: black;
  text-decoration: none!important;
  text-indent: 15px;
}

.button:before,
.button:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 10px;
  top: 52%;
  text-align: center;
}


/* box shape  */

.button:before {
  width: 20px;
  height: 4px;
  border-style: solid;
  border-width: 0 4px 4px;
}

body {
  text-align: center;
}

<a href="#" class="button">demo</a>

Answer 6

＆＃13;

.button {
	display: inline-block;
	position: absolute;
	padding: 10px 60px;
	  
	background-color: transparent;
	border: 3px solid black;
	color: black;
  
	text-decoration: none!important;
         	text-align: center;
	text-indent: 15px;
  left: calc(50% - 88px);
}

.button:before, .button:after {
	content: ' ';
	display: block;
	position: absolute;
	left: 10px;
	top: 52%;
}

/* box shape  */
.button:before {
	width: 20px;
	height: 4px;
	border-style: solid;
	border-width: 0 4px 4px;
}

＆＃13;

<a href="#" class="button">demo</a>

＆＃13;

Answer 7

只需将您的.button类CSS更改为此类：

.button {
    display: inline-block;
    position: absolute;
    width: 20px;
    padding: 10px 60px;
    background-color: transparent;
    border: 3px solid black;
    color: black;
    text-decoration: none!important;
    text-align: center;
    text-indent: 15px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

一定会奏效。感谢。

HTML5 <a> element not centering

7 个答案: