Question

在开发此网页时，我需要一种方法将内容（在本例中为＃34; fdsa＆＃34;）置于页面底部的中心。

非居中的图像。

我希望它能做什么。

我遇到的所有解决方案和尝试都认为内容要集中在页面的中间而不是页面区域的中间。我以为我可以在区域周围制作一个边界框，并在边界框内居中，但我不是一个网络开发人员，也不知道该怎么做。

HTML

<html>

    <head>
        <script src="js/index.js"></script>

        <link rel="stylesheet" type="text/css" href="css/fonts.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <Title>FMA</Title>
    </head>

    <body>

        <div class="center">    
            <div class="title">
                <h1>Future Market Analysis</h1>
                <h4>Change the way you trade today!</h4>
            </div>
        </div>
        <br />
        <br />
        <ul>
            <div class="center">
                <li>
                    <a onclick="showHome();">Home</a>
                    <a onclick="showRegister();">Register</a>
                    <a onclick="showLogin();">Login</a>
                    <a onclick="showStatus();">Status</a>
                </li>
            </div>
        </ul>

        <br />
        <br />

        <div id="home" class="home">
            fdsa
        </div>

        <div id="register" style="display: none;">
            <div id="wrapper">
                fdsa
            </div>
        </div>

        <div id="login" style="display: none;">

        </div>

        <div id="status" style="display: none;">

        </div>

    </body>

</html>

CSS

body{
    margin: 0;
    font-family: QuickSand;
    background-color: aliceblue;
    height:100%;
}

title{
    display: inline-block;
}

h1 {
    font-size: 40px;
}

home{

}



ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #D1F2FF;
}

li {
    float: center;
}

li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    cursor: default;
    background-color: #4CC5F5;
}
.center {
    text-align: center;
}

Answer 1

以下是使用flexbox的开始。

我还纠正了div和ul之间有li元素的事实，这不应该是。

另一个建议是将margin-top添加到home课程，而不是使用这些<br>代码。

html, body {
  margin: 0;
  height: 100%;
  font-family: QuickSand;
  background-color: aliceblue;  
}
.container {
  display: flex;
  flex-direction:column;
  height:100%;
}
.home {
  flex: 1;  
  display: flex;
  justify-content: center;
  align-items: center;
}

title{
    display: inline-block;
}

h1 {
    font-size: 40px;
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #D1F2FF;
}

li {
    float: center;
}

li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    cursor: default;
    background-color: #4CC5F5;
}
.center {
    text-align: center;
}

<div class="container">
  <div class="center">    
    <div class="title">
      <h1>Future Market Analysis</h1>
      <h4>Change the way you trade today!</h4>
    </div>

    <ul>
      <li>
        <a onclick="showHome();">Home</a>
        <a onclick="showRegister();">Register</a>
        <a onclick="showLogin();">Login</a>
        <a onclick="showStatus();">Status</a>
      </li>
    </ul>
  </div>

  <br />
  <br />

  <div id="home" class="home">
    fdsa
  </div>

  <div id="register" style="display: none;">
    <div id="wrapper">
      fdsa
    </div>
  </div>

  <div id="login" style="display: none;">

  </div>

  <div id="status" style="display: none;">

  </div>

</div>

当需要旧的浏览器支持时，display: table将成为具有类似要求的最佳替代方案。

html, body {
  margin: 0;
  height: 100%;
  font-family: QuickSand;
  background-color: aliceblue;  
}
.container {
  display: table;
  width: 100%;
  height:100%;
}
.row {
  display: table-row;
}
.home {
  display: table-cell;
  height:100%;
  vertical-align: middle;
  text-align: center;
}

title{
    display: inline-block;
}

h1 {
    font-size: 40px;
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #D1F2FF;
}

li {
    float: center;
}

li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    cursor: default;
    background-color: #4CC5F5;
}
.center {
    display: table-cell;
    text-align: center;
}

<div class="container">
  <div class="row">    
    <div class="center">    
      <div class="title">
        <h1>Future Market Analysis</h1>
        <h4>Change the way you trade today!</h4>
      </div>

      <ul>
        <li>
          <a onclick="showHome();">Home</a>
          <a onclick="showRegister();">Register</a>
          <a onclick="showLogin();">Login</a>
          <a onclick="showStatus();">Status</a>
        </li>
      </ul>
    </div>
  </div>

  <br />
  <br />

  <div class="row">
    <div id="home" class="home">
      fdsa
    </div>
  </div>

  <div class="row">
    <div id="register" style="display: none;">
      fdsa
    </div>
  </div>

  
  <div class="row">
    <div id="login" style="display: none;">

    </div>
  </div>

    <div class="row">
    <div id="status" style="display: none;">

    </div>
  </div>

  
</div>

Answer 2

一个简单的例子。 https://jsfiddle.net/85y6ts4c/

False

  

  #content{
  height: 300px;
  display: table;
  width:500px;
  text-align: center;
}
#content p {
  display: table-cell;
  vertical-align: middle;
}

页面中心内容不是从左上角开始

2 个答案: