html - 居中块中的左对齐内容(响应式布局)

所以，我正在做同样的事情，并且遇到类似的问题。我发现没有任何回应可以解决问题。

这是小提琴：http://jsfiddle.net/VeritoAnimus/m34rmmda/

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Page</title>

    <style>

        body {
            margin: 0px;
            padding: 0px;
            font-size: 0px;
        }

        .my-block {
            display: inline-block;
            width: 31%;
            min-height: 300px;
            background-color: #0ff;
            border: 1px solid black;
            margin: .5%;
            padding: .5%;
            text-align: center;
            align-content: center;
            vertical-align: top;
        }

        .inner-block {
            display: inline-block;
            min-height: 140px;
            background-color: rgba(90, 213, 25, 0.42);
            border: 1px solid black;
            margin: 4px auto;
            padding: 4px;
            text-align: left;
        }

        .small-block {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #4cff00;
            border: 1px solid black;
            margin: 4px;
            padding: 4px;

        }


    </style>

</head>
<body>

    <div class="my-block">


    </div>

    <div class="my-block">
        <div class="inner-block">
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>


        </div>

    </div>

    <div class="my-block">


    </div>


</body>
</html>

这就是我得到的和我正在寻找的

实际结果

所需结果

最佳答案

您可以在这里：DEMO。我在CSS中为.inner-block分配了宽度：

.inner-block {
       width: 81%;
 }

关于html - 居中块中的左对齐内容(响应式布局)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26349081/