Question

我希望每SO Post here使用display:inline-block，以便div占用其子级的维度。

它的工作原理如帖子中所述。我遇到的问题是，现在我的中心因这种变化而中断。

我使用

将div放在中心位置

margin: 0px auto;

我希望div居中，我也希望它能够将其视为儿童的维度。

这是包含div的CSS：

#container-1{
  display: inline-block;
  position: relative;
  top: 50px;
  width: 1000px;
  margin: 0px auto;
  background: rgba(255, 255, 255, 0.5);
}

这是HTML - div中只有两个p标签。

<div id="container-1">
    <p id='si_but' class='si_match blue_but radius_all medium_white'>SignIn</p>
    <p id='su_but' class='si_match orange_but radius_all medium_white'>SignUp</p>
</div>

如果需要，可以使用2 p标签的CSS：

.si_match{
  cursor:  pointer;
  display: inline-block;
  padding:  14px 14px;  
  text-decoration:  none;
  font-size: 14px;
}

#si_but{
  position: relative;
  left: 50px;
  float: left;
}
#su_but{
  position: relative;
  right: 50px;
  float: right;
}

更新更大的问题是为什么我的左边包含div大约200 px。没有任何迹象表明这是为什么。

Answer 1

在这里你需要添加一个＆＃34; text-align：center＆＃34;到父元素。所以考虑＆＃34;＆lt; body＆gt;＆＃34;成为其父元素。

convertTabs = await >>= go0
  where
    go0 b = do
      let (pre,post) = BS.break (== '\t') b
      yield pre
      if BS.length post == 0
        then await >>= go0
        else do yield "\t"
                go1 post

    go1 b = do
      let b' = BS.dropWhile (== '\t') b
      if BS.null b'
        then await >>= go1
        else go0 b'

example2 = runEffect $ each [ "___\t___\t\t___\t\t\t___" ]
                       >-> convertTabs
                       >-> printAll

这是相关的HTML。

body{
text-align: center;
}

#container-1{
  display: inline-block;
  position: relative;
  top: 50px;
  width: 1000px;
  margin: 0px auto;
  background: rgba(255, 255, 255, 0.5);
}

希望这会有所帮助。干杯!!

Answer 2

您可以将text-align：center添加到body元素：

body{
   text-align:center;
}

从这里复制的答案：CSS center display inline block?

Answer 3

您只需使用显示表而不是内联块。

(sdate >= '2015-08-23' AND edate <= '2015-08-25')

Answer 4

父母的{p> text-align:center将以inline-block个孩子为中心。

任何错位都与您应用的定位有关。只需将它与浮子一起移除。

#container-1 {
  text-align: center;
}
.si_match {
  cursor: pointer;
  display: inline-block;
  padding: 14px 14px;
  text-decoration: none;
  font-size: 14px;
  border: 1px solid grey;
}

<div id="container-1">
  <p id='si_but' class='si_match blue_but radius_all medium_white'>SignIn</p>
  <p id='su_but' class='si_match orange_but radius_all medium_white'>SignUp</p>
</div>

显示：内联块正在打破我的中心机制 - 如何解决？

4 个答案: