css - 在主 div 中居中 div 框

Question

我正在开发一个移动网站，该网站的页面需要根据纵向和横向模式进行更改。我有那部分工作。当移动设备处于纵向模式时，它应该显示 4 个框:

[] []
[][]

在横向模式下，它们应该是这样的:

[] [] [] []

我已经完成了大部分工作，但是在纵向和横向模式下，它们都居中偏左。我已经搜索过这个站点并发现了类似的问题，但是在尝试实现该解决方案时，它似乎不起作用。我希望它们居中(使用百分比而不是固定宽度，以便它在任何移动设备上都能正确显示)。我不太熟悉 CSS，请原谅，但这是我的代码:

/* Landscape mode (default) */
div.my_wrapper{
width: auto;
position:relative;
padding:20px;
}

div.my_innerBox {
    width:100%;
    float:left;
    border: 1px solid green;
}

div.my_left_box{
    float: left;
    margin-right:10px;
    padding: 20px;
    /*margin-left:90px;*/

    width: 16%;
    border: 1px solid gray;
}

div.my_right_box{
    float: left;
    margin-right:10px;
    padding:20px;

    width: 16%;
    border: 1px solid gray;
}

div.my_header{
    padding:10px;
    float:left;
    width: 100%;
    border: 1px solid gray;
    margin-bottom:12px;
}

@media only screen and (orientation:portrait){
/* portrait mode */
div.my_wrapper{
width: inherit;
margin-left:auto;
margin-right:auto;
padding:20px;
}

div.my_innerBox {
    width: 95%;
    display:inline;

}
div.my_left_box{
    float: left;
    padding: 20px 10px;
    /*margin-left:90px;*/
    margin: 0 10px 10px 0;
    width: 30%;
    border: 1px solid gray;
}

div.my_right_box{
    float: left;
    margin: 0 10px 10px 0;
    padding:20px 10px;
    width: 30%;
    border: 1px solid gray;
}

div.my_header{
    padding:10px;
    border: 1px solid gray;
    margin-bottom:12px;
    text-align:left;
    float:left;
}
div.my_desc {
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    vertical-align:middle;
    position:absolute;
    float:left;
    width:500px;
}
div.my_header_container {
    width:100%;
    float:left;
}
}


<div class="my_header_container">
    <div class="my_header">Title Will Go here
        <div class="my_desc">This is where the description content will    go</div>
    </div>
</div>
<div class="my_wrapper">
    <div class="my_left_box">
        Button 1
    </div>

    <div class="my_right_box">
        Button 2
    </div>
    <div class="my_left_box">
        Button 3
    </div>

    <div class="my_right_box">
        Button 4
    </div>

</div>

另外，我需要将“这是内容描述所在的位置”放在“Title Will Go here”的右侧，并垂直居中。

如有任何帮助，我们将不胜感激。我正在尝试学习 css，因为我更像是一名程序员，而不是设计师。谢谢，我很感激你能给我的任何帮助。

Answer 1

您真的应该考虑使用 SASS 预处理器并利用众多 Compass 扩展的强大功能。

以下是使用 SASS 解决您的问题的方法:http://sassbin.com/gist/5785963/

请注意代码更短更易读。

@fredsbend 说你不能让 float 的东西居中。好吧，当 SASS 自动根据您的喜好精确设置所有元素的宽度时，情况并非如此，而您只提供列号。