css 排版问题

发布于
2018-04-26

更新于
2018-04-26

父级 div 响应式宽度，子级 span 固定宽度，想让子级居中，父级使用 text-align: center 得到下面的效果， 最后一行排版想居左，没有什么思路...

大概是这么个布局

div {
  width: 25vw;
  text-align: center;
}
span {
  display: inline-block;
  width: 100px;
  margin: 5px;
  background: #008000;
}

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

html css

阅读 3.2k

6 个回答

jcomey

✓ 已被采纳

<html>
<style>
  .item {
    width: 120px;
    background-color: #00abff;
    height: 60px;
    margin: 10px;

  }

  .empty {
    height: 0px;
    visibility: hidden;
    width: 120px;
      margin: 10px;
      background: #555;
  }

  .box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
</style>

<body>
  <div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
   
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
     <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
  </div>
</body>

</html>

天空影

1.1k41432

发布于
2018-04-26

更新于
2018-04-26

<style>
    .warp {
      width: 25vw;
      /*text-align: center;*/
      border:1px solid red;
    }
    li{
      display: inline-block;
      width: 100px;
      margin: 5px;
      background: #008000;
    }
</style>
<div class="warp">
    <ul class="list">    
        <li>span1</li>
        <li>span1</li>
        <li>span1</li>
        <li>span1</li>
        <li>span1</li>
    </ul>  
</div>

图片描述