居中包含左对齐文本和另一个div的div

Question

我想要做的是：

• 将一个包含两个内联元素的容器 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 .container{ 宽度: 80%; 高度: 自动; 边距: 0 居中; 背景颜色: 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链接。

非常感谢您的帮助。

- sanjaypoyzer

Answer 1

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

编辑 - 改进

试一下吧！

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;
}

- misterManSam

---

这个完成了任务！谢谢！ - suryanaga

理想情况下它应该居中，但现在置于顶部也好像没问题。它是否可能居中呢？ - suryanaga

@misterManSam 这只考虑了最大宽度。并没有考虑较小的情况。不过除此之外，它还是很出色的。 - MiniRagnarok

很好。@sanjaypoyzer，这是你的最终解决方案，完美地修复了一切 :D - misterManSam

Answer 2

像这样吗？

http://codepen.io/anon/pen/pfbvH?editors=110

我创建了一个名为"title-box"的类，并将正方形和h2放在表格单元格中。浅蓝色的正方形随标题的高度缩放：

 .title-box {
   background-color: rgba(150,100,200,0.8);
   margin: 0 auto;
   padding: 1em;
   display: table;
 }

 .box{
   width: 3em; 
   height: 3em;
   background-color: lightblue;
   display: table-cell;
 }

 h2{
   margin: 0 auto;
   text-align: left;
   display: table-cell;
   padding: 10px;
 }

- Puzzled