Question

我有以下HTML＆amp; CSS：

＆＃13;

body {
  font-size: 16px;
  overflow: scroll;
}
html {
  position: absolute;
  min-height: 100%;
}
.mainContainer {
  position: absolute;
  padding-top: 40px;
  margin: 0px auto;
  width: 1200px;
}
.mainpagetitleContainer {
  position: absolute;
  padding-top: 20px;
}
.mainpagetitle {
  font-size: 4em;
  font-weight: 300;
  margin: 0px auto;
}
.mainpagetitleContainer > .subtitle {
  color: #333;
  width: 400px;
  margin: 0px auto;
  font-size: 1.2em;
  font-weight: 300;
}

＆＃13;

<div class="mainContainer">
  <div class="mainpagetitleContainer">
    <div class="mainpagetitle">
      Text.
    </div>
    <div class="subtitle">
      Text.
    </div>
  </div>
</div>

＆＃13;

我试图按照this answer to Horizontally center a div in a div中所述的方式对待我的div，但是我的div似乎意图被卡在页面的左侧而不是中心。

这个想法是为页面设置一个背景和一个中心列，如下所示：

我试图弄乱margin: 0px auto;无效。

我做错了什么，我该如何解决这个问题？

Answer 1

摆脱绝对定位。

在html上使用.maincontainer使其缩小到适合度。由于body不在流量范围内，auto将为0px宽。然后居中没有任何意义。

只是添加left: 0页边距不会使绝对定位的元素居中。您还需要right: 0和body { font-size: 16px; overflow: scroll; } html { min-height: 100%; } .mainContainer { padding-top: 40px; margin: 0px auto; width: 500px; background: yellow; } .mainpagetitleContainer { padding-top: 20px; } .mainpagetitle { font-size: 4em; font-weight: 300; margin: 0px auto; } .mainpagetitleContainer > .subtitle { color: #333; width: 400px; margin: 0px auto; font-size: 1.2em; font-weight: 300; }。

<div class="mainContainer">
  <div class="mainpagetitleContainer">
    <div class="mainpagetitle">
      Text.
    </div>
    <div class="subtitle">
      Text.
    </div>
  </div>
</div>

#if INTERACTIVE
#r "PresentationCore.dll"
#r "PresentationFramework.dll"
#r "System.Xaml.dll"
#r "WindowsBase.dll"
#endif

open System
open System.Windows
open System.Windows.Input
open System.Windows.Controls

type InheritTheApp() =
    inherit Application()

    override t.OnStartup(args) =
        base.OnStartup(args)

        let win = Window()
        win.Title <- "Inherit The App"
        win.Show()

    override t.OnSessionEnding(args) =
        base.OnSessionEnding(args)

        let res = MessageBox.Show("Do you want to save your data?",t.MainWindow.Title,MessageBoxButton.YesNoCancel,MessageBoxImage.Question,MessageBoxResult.Yes)

        args.Cancel <- (res = MessageBoxResult.Yes)

[<STAThreadAttribute>]
do
    let app = new InheritTheApp()
    app.Run() |> ignore

Answer 2

使用margin：0 auto水平居中div，你应该在容器和内部div上使用position relative。

尝试这样的事情：

body {
  font-size: 16px;
  overflow: scroll;
}
html {
  position: relative;
  min-height: 100%;
}
.mainContainer {
  position: relative;
  padding-top: 40px;
  margin: 0px auto;
  width: 1200px;
}
.mainpagetitleContainer {
  position: relative;
  padding-top: 20px;
}
.mainpagetitle {
  font-size: 4em;
  font-weight: 300;
  margin: 0px auto;
}
.mainpagetitleContainer > .subtitle {
  color: #333;
  width: 400px;
  margin: 0px auto;
  font-size: 1.2em;
  font-weight: 300;
}

要了解有关CSS中布局的更多信息，建议您阅读以下网站：http://learnlayout.com/toc.html

为什么我的CSS居中样式被忽略了？

2 个答案: