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>元素不居中

回答

相關問題