Question

我想要div中的两个跨度中心，但我失败了，如何修复它？下面的代码没有效果，但是当我从两个跨度中放出一个div时，显示属性更改为inline-block时生效，这怎么可能发生？

＆＃13;

body{
  margin: 0;
  padding: 0;
}
.topbar{
  border: 1px solid;
  max-width: 800px;
  height: 20px;
}
.inner1{
  float: left;
  border: 1px solid red;
}
.inner2{
 float: left;
  border: 1px solid red;
}
.clearfix::after{
  content: "";
  clear: both;
  display: block;
}
.topbar{
  text-align: center;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="topbar ">
  
    <span class="inner1">register</span>
    <span class="inner2">login</span>
  
</div>
  
</body>
</html>

＆＃13;

Answer 1

你的inner1和inner2类中有float: left，他们将跨度移到左边。只是删除它们工作正常。以下是更新后的代码。

＆＃13;

body{
  margin: 0;
  padding: 0;
}
.topbar{
  border: 1px solid;
  max-width: 800px;
  height: 20px;
}
.inner1{
  border: 1px solid red;
}
.inner2{
  border: 1px solid red;
}
.clearfix::after{
  content: "";
  clear: both;
  display: block;
}
.topbar{
  text-align: center;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="topbar ">
  
    <span class="inner1">register</span>
    <span class="inner2">login</span>
  
</div>
  
</body>
</html>

＆＃13;

Answer 2

由于float: left;在两个跨度上都无法居中。只需删除float: left;，它就会转到中心位置。

你说当你用div在inline-block内展开div时，它是有效的。这是因为float: left因为没有float: left而会转到中心位置，然后跨度将div置于居中的_time MessageID Sender Recipients 4:25 <12345> Sender1 Recipient1 4:50 <12345> Sender1 Recipient2内。希望你明白了：）

Answer 3

另一种方法可能就是使用flexbox模型。它更容易，代码也很短。

body {
  margin: 0;
  padding: 0;
}

.topbar {
  border: 1px solid;
  max-width: 800px;
  height: 20px;
  display: flex;
  justify-content: center;
}

.topbar span {
  border: 1px solid green;
}

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="topbar ">
  
    <span class="inner1">register</span>
    <span class="inner2">login</span>
  
</div>
  
</body>
</html>

PS：另外为了缩短代码，我使用了inner1和inner2，而不是.topbar span和$sql = "INSERT INTO cart(album_name,price,quantity,customer_id) VALUES('$album_name','$price','$quantity','$customer_id')"; mysqli_query($db, $sql); $_SESSION['customerId']=mysqli_insert_id($db);//gets the last inserted customerid from db，因为两者共享相同的属性。

为什么两个跨度不能居中于div？

3 个答案: