如何让div中心与div左对齐？

Question

我在页面中有一个父Div中心对齐，内容根据结果动态添加到父Div。

父div是100％宽并且在页面中居，期望结果应该是

_______________________________________
|      [Image]  [Image]  [Image]      |
|      [text ]  [text ]  [text ]      |
|      [Image]  [Image]               |
|      [text ]  [text ]               |

但结果是

_______________________________________
|      [Image]  [Image]  [Image]      |
|      [text ]  [text ]  [text ]      |
|          [Image]  [Image]           |
|          [text ]  [text ]           |

＆＃13;

＆＃13;

    .row {
	  width: 100%;
	  text-align: center;
    }
    .block {
	  display:inline-block;
	  margin-left: 10px;
    }
    .block img {
	  display:block;
    }
    .block span {
	  width : 100%;
	  text-align: center;
    }

＆＃13;

    <div class="row">
       <div class="block" width="320" height="200">
          <img src="a.jpg"></img>
          <span>a.jpg</span>
       </div>
       <div class="block" width="320" height="200">
          <img src="b.jpg"></img>
          <span>b.jpg</span>
       </div>
       <div class="block" width="320" height="200">
          <img src="c.jpg"></img>
          <span>c.jpg</span>
       </div>
       <div class="block" width="320" height="200">
          <img src="d.jpg"></img>
          <span>d.jpg</span>
       </div>
       <div class="block" width="320" height="200">
          <img src="e.jpg"></img>
          <span>e.jpg</span>
       </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您正在将内容与text-align: center;标记对齐，如果您希望它们与您应使用float: left;的一侧对齐，则始终将元素居中。

希望它有所帮助。

Answer 2

您可以使用以下代码获得所需的结果。

<div class="row">
   <div class="block" width="320" height="200">
      <img src="a.jpg"></img>
      <span>a.jpg</span>
   </div>
   <div class="block" width="320" height="200">
      <img src="b.jpg"></img>
      <span>b.jpg</span>
   </div>
   <div class="block" width="320" height="200">
      <img src="c.jpg"></img>
      <span>c.jpg</span>
   </div>
   <div class="block" width="320" height="200">
      <img src="d.jpg"></img>
      <span>d.jpg</span>
   </div>
   <div class="block" width="320" height="200">
      <img src="e.jpg"></img>
      <span>e.jpg</span>
   </div>
</div>

.row {
  width: 100%;
  text-align: center;
}
.wrap {
  display: inline-block;
  text-align: left;
}
.block {
  display:inline-block;
  margin-left: 10px;
}
.block img {
  display:block;
}
.block span {
  width : 100%;
  text-align: center;
}

Answer 3

对于行类正确的css如下：

.row {
  width: 100%;
}

Answer 4

我在图像周围使用了一个额外的容器。容器本身将位于页面的中心，使用左侧和右侧的自动边距。 图像使用flexbox定位，默认情况下会响应。

班级.block有text-align: center;将文字正确放在图片下方。

我删除了</img>代码，因为它们不正确。

＆＃13;

＆＃13;

.row {
  width: 100%;
}

.block {
  display: inline-block;
  margin-left: 10px;
  text-align: center;
}

.block img {
  display: block;
}

.block span {
  width: 100%;
  text-align: center;
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
}

＆＃13;

<div class="row">
  <div class="container">
    <div class="block" width="320" height="200">
      <img src="http://via.placeholder.com/150x150">
      <span>a.jpg</span>
    </div>
    <div class="block" width="320" height="200">
      <img src="http://via.placeholder.com/150x150">
      <span>b.jpg</span>
    </div>
    <div class="block" width="320" height="200">
      <img src="http://via.placeholder.com/150x150">
      <span>c.jpg</span>
    </div>
    <div class="block" width="320" height="200">
      <img src="http://via.placeholder.com/150x150">
      <span>d.jpg</span>
    </div>
    <div class="block" width="320" height="200">
      <img src="http://via.placeholder.com/150x150">
      <span>e.jpg</span>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

在下面添加css： .block {width: 33.33%;float: left;text-align: center;} .block img {display: block;margin: auto;} & .block span{display: block;}

Answer 6

您可以尝试<Nav style={{display:"flex", flexDirection:"row"}}> ... </Nav> row更改text-align: center;

HTML：

＆＃13;

＆＃13;

text-align: left;

＆＃13;

.row {
    width: 100%;
    text-align: left;
}
.block {
    display:inline-block;
    margin-left: 10px;
}
.block img {
    display:block;
}
.block span {
    width : 100%;
    text-align: center;
}

＆＃13;

＆＃13;

＆＃13;