css - 在 html/css 中将对象彼此相邻居中，没有顶部偏移

Question

我有四个文本 block ，我希望它们在背景图片上并排居中。

------------
x x x x
--------

我通常会为此使用表格，但我听说 css/html5 已经足够好了，不再需要表格了。

而且，如果在小屏幕上，四个 block 将转换为 2x2，并且在更小的屏幕上， block 将转换为一个在另一个之上，那就太好了。

-----
x x

××
-----

或

---
x
x
x
x
---

我尝试使用两个 div(每行一个)来执行此操作，但是一旦我 float 对象，我可能会得到其他不需要的配置:

--------
x x x 这很糟糕 =(
x
------

我尝试按照下面的建议使用 display:inline-block 语句，看起来好像是在正确的轨道上，但是这导致文本 block 的顶部没有垂直对齐——就好像 inline-block 语句是插入换行符。进一步的想法？

---

 Trying with display:inline-block :

      <div style="overflow:hidden;padding:1em;margin:1em auto;border:1px solid #bbb;font-size:150%"> <!--this holds th\
e table-thing -->

      <div style="background-color:rgba(200,200,200,.7);width:900px;margin:0px auto">
        <b>This is a heading...</b><br>
      </div>
      <div style="border:1px solid blue;margin:0px auto;overflow:hidden;text-align:center">

        <div style="overflow:hidden; border:1px solid brown;display:inline-block"><!-- holds the first "row"-->
      <div style="height:13em;width:180px;padding:12px;background-color:rgba(200,200,200,.7);color:black;margin-right:\
30px;display:inline-block">
        <b>Attribute 1</b>
        <br>
          This is a great attribute.
      </div>
      <div style="height:13em;padding:12px;width:180px;background-color:rgba(200,200,200,.7);color:black;margin-right:\
30px;margin-left:0px;display:inline-block">
        <b>Cheaper</b>
        <br>
          Everyone loves ways to perform at low cost.
      </div>
      </div><!-- closes the first "row" -->
      <div style="overflow:hidden; border:1px solid green;display:inline-block"><!-- holds the second "row"-->

        <div style="padding:12px;height:13em;width:180px;background-color:rgba(200,200,200,.7);color:black;margin:30px\
;margin-left:0px;display:inline-block">
          <b>Robust</b>
          <br>
            And once you do a cost reduction, continuing to perform is also important.
        </div>
        <div style="padding:12px;height:13em;width:180px;background-color:rgba(200,200,200,.7);color:black;margin:30px\
;margin-left:0px;display:inline-block">
          <b>Human-safe</b>
          <br>
            Because, why not!?
        </div>
      <br>
      </div>
      </div><!-- closes the second "row" -->
      </div><!--closing out the table thing -->

Answer 1

我认为你应该把你的元素放在一个容器 div 中并使用它。

div.container{
    text-align: center
}
.elements{
    display: inline-block;
}