将元素保留在div的中心

Question

我正在创建一个需要响应的网页。

以下是它的图像：

这是HTML：

        <div class="smallBoxes">
            <div class="leftHomeBox">

                <a class="Description" id="Desc_1">WHEN?</a>
            </div>  
        </div>      

和CSS：

.smallBoxes{
    display:block;
    margin-left:25%;
    margin-right:20%;
    width:auto;
}

.leftHomeBox{
    width:100%;
    float:left;
    margin-bottom:10px;
    padding:10px;
    padding-bottom:0;
    height:65px;
}


.Description{
    border:5px solid #ffffff;
    padding:5px;
}

我正在尝试将div中的“when”框保留为所有屏幕尺寸。现在的情况是，两个利润率都会发生变化，但是利率不同，例如它们相对于彼此并不保持一致，因此“何时”框不会保持中心。

我查看了其他网站，但未能找到合适的例子。

我尝试过使用

margin-left:20%;
margin-right:20%;
width:auto;

但这不起作用。我整天都在努力工作，我已经阅读了所有我能找到的东西，但我似乎无法让这个工作。我已经尝试了所有可以想到的事情。

当然，这是经常需要的，并且不是很难实现，但我无法找到如何实现这一目标或我做错的明确答案。

如果有人可以提供工作解决方案的小提琴，我将非常感激。

Answer 1

使用

<强> CSS

.leftHomeBox{
text-align:center
}

DEMO

Answer 2

.Description
{
 display:block;
 margin-left:auto;
 margin-right:auto;
}

这应该可行。

Answer 3

您可以在<a>代码上应用text-align：center。

.leftHomeBox{
  text-align:center
}

它将使链接居中而不使用边距