html - 居中包含左对齐文本的 div + 另一个 div

Question

我正在尝试:

• 将包含 2 个内联元素的容器 div 居中:另一个 div 和一个标题。
• 标题可以是任意长度。
• 元素必须彼此相邻。
• 文本必须左对齐。
• div 必须与文本中心垂直对齐。

这是目标:

这就是我目前所拥有的。

HTML

 <div class="container">
  <div class="container">
    <div class="box"></div>
    <h2>This is my title</h2>
  </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsum reprehenderit ipsam hic adipisci ex obcaecati asperiores ab rerum, incidunt eius eligendi ea, odit, maiores fugit cumque modi, facere laudantium.</p>
   <div class="container">
    <div class="box"></div>
    <h2>This is another title. It could be any length. Any length at all.</h2>
  </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsum reprehenderit ipsam hic adipisci ex obcaecati asperiores ab rerum, incidunt eius eligendi ea, odit, maiores fugit cumque modi, facere laudantium.</p>
</div>

CSS 。容器{ 宽度:80%； 高度:自动； margin : 0 auto ； 背景色:rgba(150,100,200,0.8)； 文本对齐:居中； 填充:1em； p{ 文本对齐:左； }

.box{
  display: inline-block;
  width: 3em; 
  height: 3em;
  background-color: lightblue;
  vertical-align: middle;
}

h2{
  display: inline-block;
  width: calc(100% - 4em);
  margin: 0 auto;
  text-align: left;
}

它在 codepen 中

非常感谢帮助。

Answer 1

这是一个使用 display: table 的解决方案。

编辑 - 改进

Have a fiddle!

HTML

<div class="container">
    <div class="heading">
        <div class="box">
            <div></div>
        </div>
         <h2>This is my title</h2>    
    </div>
    <p>Content</p>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.box {
    display: table-cell;
    vertical-align: middle;
}
.box div {
    width: 3em;
    height: 3em;
    background-color: lightblue;
}
h2 {
    display: table-cell;
    vertical-align: middle;
    padding: 0 0 0 10px;
    text-align: center;
    max-width: 400px;
}
.heading {
    display: table;
    margin: 0 auto;
}
p {
    text-align: center;
}