Question

我正在努力：

以容器div为中心，其中包含2个内联元素：另一个div和一个标题。
标题可以是任意长度。
元素必须彼此相邻。
文字必须左对齐。
div必须垂直对齐文本中心。

这是目标：

intention

这是我到目前为止所做的。

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％; 身高：自动; 保证金：0自动; background-color：rgba（150,100,200,0.8）; text-align：center; 填充：1em; p { text-align：left; } }

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

Answer 2

喜欢这个吗？

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

我创建了一个类“标题框”，并在表格单元格中创建了正方形和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;
 }

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

2 个答案: