将文本与第一个左块对齐

Question

我想将文本与第一个左侧块对齐。块对齐到中间。更改 screen/browser 宽度时，应调整文本。

要做什么，才能得到这个：

在IE中可以吗？

#container {
  border: 1px solid gray;
}
.outerBlock {
    border: 1px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.block {
  width: 150px;
  height: 150px;
  background-color: #cccccc;
  margin: 10px;
}

<div id="container">
  Aligned left to first block
  <div class="outerBlock">  
    <div class="block">1</div>    
    <div class="block">2</div>    
    <div class="block">3</div>    
    <div class="block">4</div>    
    <div class="block">5</div>
  </div>
</div>

Answer 1

使用 flexbox 执行此操作的唯一方法是将框设置为 justify-content: space-between;。然后给顶部的文字留10px的左边距：

#container {
    border: 1px solid gray;
}

#container span{
 margin-left:10px;
}

.outerBlock {
    border: 1px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.block {
    width: 150px;
    height: 150px;
    background-color: #cccccc;
    margin: 10px;
}

<div id="container">
    <span>Aligned left to first block</span>
    <div class="outerBlock">
        <div class="block">1</div>
        <div class="block">2</div>
        <div class="block">3</div>
        <div class="block">4</div>
        <div class="block">5</div>
    </div>
</div>

更新：定位于jQuery

var el = $('.outerBlock > .block');
var os = el.offset();

$('.blockText').css("margin-left",os.left - parseInt(el.css('margin-left')));

*{
  box-sizing:border-box;
}

#container {
    border: 1px solid gray;
}

.outerText {
    border: 1px solid red;
}

.outerBlock {
    border: 1px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.block {
    width: 150px;
    height: 150px;
    background-color: #cccccc;
    margin: 10px;
}
.blockText {
    width: 150px;
    max-height: 20px;
    margin: 0 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
    <div class="outerText">
      <div class="blockText">News</div> 
    </div>
    
    <div class="outerBlock">
        <div class="block">1</div>
        <div class="block">2</div>
        <div class="block">3</div>
        <div class="block">4</div>
        <div class="block">5</div>
    </div>
</div>

将文本与第一个左块对齐

Aligning text to first left block

css

alignment

css-float

flexbox