HTML5 <a>元素不居中

-2

由于某种原因，此<a>标记将不会与水平中心对齐。为了解决这个问题需要做些什么？HTML5 <a>元素不居中

.button { 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t padding: 10px 60px; 
 
\t 
 
\t background-color: transparent; 
 
\t border: 3px solid black; 
 
\t color: black; 
 
    
 
\t text-decoration: none!important; 
 
      \t text-align: center; 
 
\t text-indent: 15px; 
 
} 
 

 
.button:before, .button:after { 
 
\t content: ' '; 
 
\t display: block; 
 
\t position: absolute; 
 
\t left: 10px; 
 
\t top: 52%; 
 
} 
 

 
/* box shape */ 
 
.button:before { 
 
\t width: 20px; 
 
\t height: 4px; 
 
\t border-style: solid; 
 
\t border-width: 0 4px 4px; 
 
}

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

来源

2017-04-25 MacaronLover

文本缩进？ – sol

你可以把''text-align：center''放在包含块（本例中是body） – Orangesandlemons

把它包在具有text-align: center; DIV标签：

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

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

来源

2017-04-25 09:52:26 Johannes

1）没有提及任何库，它是一个css和html问题。 2。）很难相信有任何图书馆会删除已分配给CSS的DIV - 但即使存在，我也强烈建议不要使用它 - 对我的代码进行擦除的库的用途是什么？ – Johannes

用保证金：0汽车;用于居中并更改标签以显示：block;还增加了一个宽度。

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

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

来源

2017-04-25 09:53:11 athi

使用变换做的伎俩。

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

.button { 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t padding: 10px 60px; 
 
\t 
 
\t background-color: transparent; 
 
\t border: 3px solid black; 
 
\t color: black; 
 
    
 
\t text-decoration: none !important; 
 
     text-align: center; 
 
\t text-indent: 15px; 
 
} 
 

 
.button:before, .button:after { 
 
\t content: ' '; 
 
\t display: block; 
 
\t position: absolute; 
 
\t left: 10px; 
 
\t top: 52%; 
 
} 
 

 
/* box shape */ 
 
.button:before { 
 
\t width: 20px; 
 
\t height: 4px; 
 
\t border-style: solid; 
 
\t border-width: 0 4px 4px; 
 
}

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

来源

2017-04-25 09:53:21

“一” - 元素包含在另一个元素。在你的例子中它是在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>

来源

2017-04-25 09:54:21 CoderPi

.button { 
 
\t display: inline-block; 
 
\t position: absolute; 
 
\t padding: 10px 60px; 
 
\t 
 
\t background-color: transparent; 
 
\t border: 3px solid black; 
 
\t color: black; 
 
    
 
\t text-decoration: none!important; 
 
      \t text-align: center; 
 
\t text-indent: 15px; 
 
    left: calc(50% - 88px); 
 
} 
 

 
.button:before, .button:after { 
 
\t content: ' '; 
 
\t display: block; 
 
\t position: absolute; 
 
\t left: 10px; 
 
\t top: 52%; 
 
} 
 

 
/* box shape */ 
 
.button:before { 
 
\t width: 20px; 
 
\t height: 4px; 
 
\t border-style: solid; 
 
\t border-width: 0 4px 4px; 
 
}

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

来源

2017-04-25 09:55:10

你必须做出标记块元素。而不是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>

来源

2017-04-25 09:55:54

只要改变你的.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; 
}

它肯定会工作。谢谢。

来源

2017-04-25 09:59:16

如果有疑问，请将其粘贴在div中！

HTML：

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

CSS：

.useadiv { 
    text-align: center; 
}

来源

2017-04-25 13:48:19

HTML5 <a>元素不居中

回答

相关问题