Question

我试图像这样将div置于其父div的中心：

let searchStringOfDaily = "SELECT * FROM Data where itemClass = 'a';"
let searchStringOfCare = "SELECT * FROM Data where itemClass = 'b';"
let searchStringOfCosmetic = "SELECT * FROM Data where itemClass = 'c';"

func reloadTableViewAndDatabase()
{
    self.dbHelper.searchAllDataFromDatabase { (dataArray) in
        self.array = dataArray
        DispatchQueue.main.async {
         self.tableView.reloadData()
        }
    }
}

func reloadTableViewAndDatabase(itemClass:String)
{
    self.dbHelper.searchDataFromDatabase(completionHandler: { (dataArray) in
        self.array = dataArray
        DispatchQueue.main.async {
            self.tableView.reloadData()
        }
    }, search: itemClass)
}



public func searchDataFromDatabase(completionHandler:([Data]) -> (),search:String) {

    var searchResultArray:[Data] = []
    if self.database == nil{
        self.database = FMDatabase(path: self.databasePath)
    }
    if self.database.open(){
        let searchString = search
        do{
            let resultNext = try self.database.executeQuery(searchString, values: nil)
            while resultNext.next(){
                let dataName = resultNext.string(forColumn: "name")
                let dataQuantity = resultNext.int(forColumn: "quantity")
                let dataAmount = resultNext.int(forColumn: "amount")
                let dataDate = resultNext.string(forColumn: "date")
                let dataStore = resultNext.string(forColumn: "store")
                let dataImageName = resultNext.string(forColumn: "imageName")
                let dataItemClass = resultNext.string(forColumn: "itemClass")
                let dataReminder = resultNext.string(forColumn: "reminder")

                let data = Data(name: dataName!, quantity: Int(dataQuantity), amount: Int(dataAmount), date: dataDate!, store: dataStore!, imageName: dataImageName ?? "", reminder: Int(dataReminder!), itemClass: dataItemClass!)
                searchResultArray.append(data)
            }
            print("query success")
        }catch{
            print(error.localizedDescription)
        }
        self.database.close()
    }
    completionHandler(searchResultArray)
}

当子div不能“换行”时，这可以正常工作，如下所示。

但是，一旦子元素太多而无法适应页面宽度，这些元素将换行到第二行，并且'yourdiv'会填充其父宽度，如下所示：

子元素不再位于页面的中心，因为“ yourdiv”现在填充了其父元素的宽度。我该如何解决这个问题，以使“ yourdiv”的宽度缩小到其内容的大小，以便无论有多少子元素都居中？

编辑：理想的结果是：

Answer 1

我建议使用flexbox。

要使元素水平居中使用

display: flex;
justify-content: center;
flex-wrap: wrap;

在容器上。

在孩子上玩flex-grow，min-width和max-width来调整布局。

Answer 2

将css转到flex，这太容易了。您只需设置<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" /> <nav class="navbar is-fixed-top"> <div class="nav-container"></div> <a href="">Products</a> <a href="">Our Story</a> <div id="logo">Logo placeholder</div> <a href="">Blog</a> <a href="">Contact Us</a> <div class="nav-container"> <a href=""></a> <a href="">Login</a> </div> </nav> #yourdiv使其在溢出时自动换行，并将flex-wrap: wrap;设置在子元素的中心：

justify-content: center;

  #wrapper {
    background-color: green;
    text-align: center;
  }

  #yourdiv {
    background-color: red;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  #yourdiv>div {
    float: left;
    width: 200px;
  }

  #one {
    background-color: blue;
  }

  #two {
    background-color: brown;
  }

Answer 3

在这种情况下，您应使用Flexbox，并应阅读那些好的文章：

并在玩游戏时玩这个游戏以了解Flexbox：

https://flexboxfroggy.com/

#wrapper {
  background-color: green;
  text-align: center;
}

#yourdiv {
  background-color: red;
  display: flex;
  justify-content: center;
}

#yourdiv > div {
  min-width: 100px;
}

.one {
  background-color: blue;
}

.two {
  background-color: brown;
}

<div id="wrapper">    
  <div id="yourdiv">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="one">1</div>
    <div class="two">2</div>
  </div>
</div>

防止Div在换行后填充父Div宽度

3 个答案: