Firefox：中心弹性框答案

【问题标题】：Firefox: center flex boxFirefox：中心弹性框
【发布时间】：2013-12-11 07:01:11
【问题描述】：

我的网页有以下代码，当我在 Chrome 中使用它时，一切都很好，但是当我在 Firefox 中使用它时，样式发生了变化。我需要使 Firefox 风格与 Chrome 风格相同，所以有什么建议吗？我在下面的代码中提到了我尝试做的事情。

<html>
<head>
<style> 
div
{
    background-color: #FFFFFF;
    border: 1px solid #86B3E6;
    color: 2F62AC;
    display: block;
    font-size: 17px;
    font-weight: bold;
    margin: 10px;
    padding: 5px 5px;
    text-decoration: none;
    direction:rtl;
    border-radius: 8px;
}
a
{
    background-color: #FFFFFF;
    color: 2F62AC;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    direction:rtl;
    position: relative;
    border-radius: 8px;
    border: none;
    padding: 12px 10px;
    text-align: center;
}
a.option1
{
    //Not centered but filled all area
    display: flex;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}
a.option2
{
    //Not centered and not filled all area
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center; */
}
a:active, a:hover {
    background-color: #2F62AC;
    color: #FFFFFF;
}
</style>
</head>
<body>
<div><a class="option1" href="#">Option 1</a></div>
<div><a class="option2" href="#">Option 2</a></div>
</body>
</html>

最好的问候。

【问题讨论】：

我想你想用 Flexbox 来标记它；这是“CSS的东西”。 Flex 用于 Adobe/Apache UI 框架。
您能否再次描述一下问题是什么以及您要完成什么？从您的 css cmets 中不清楚。

标签： firefox center flexbox

【解决方案1】：

您不需要为此目的使用 Flexbox：只需在您的锚点上使用 display: block：

http://cssdeck.com/labs/ocotcmpf

div
{
    background-color: #FFFFFF;
    border: 1px solid #86B3E6;
    color: 2F62AC;
    display: block;
    font-size: 17px;
    font-weight: bold;
    margin: 10px;
    padding: 5px 5px;
    text-decoration: none;
    direction:rtl;
    border-radius: 8px;
}
a
{
    background-color: #FFFFFF;
    color: 2F62AC;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    direction:rtl;
    position: relative;
    border-radius: 8px;
    border: none;
    padding: 12px 10px;
    text-align: center;
  display: block; /* here */
}
a:active, a:hover {
    background-color: #2F62AC;
    color: #FFFFFF;
}

【讨论】：