Question

我正在尝试将两个按钮彼此相邻放置在屏幕中央，而不是网页的中心。当我尝试按照我在网上找到的说明设置我的代码中的边距时，它只是垂直居中，而不是水平居中。

**<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="onCampusChef.css" />
</head>
<body>
<section id="main1">
    <div id="signUpContainer">
        <table id="signUp">
            <tr>
                <td id="signUpChef" class="signUp"> 
                    <div>
                        <!--sign up for chef location here--> <a href="">Sign up as a chef!</a>
                    </div>
                </td>
                <td id="signUpClient" class="signUp">
                    <div>
                        <!--sign up for client location here--> <a href="">Sign up as a client!</a>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</section>
<section id="main2">
    <h1>Hello</h1>
</section>
</body>
</html>**

这是CSS

body {
    padding:0px;
    margin:0px;
    height:100%;
}

#main1 {
    height:110vh;
    width:100%;
    background-image:URL("main1.jpg");
    background-size:cover;
    margin-left:0px;
    margin-top:-20px;
}



#signUp {   /*This is the CSS for the table containing the two divs that are the buttons*/
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
    vertical-align:middle;
}

.signUp {
    border-style:solid;
    border-width:5px;
    background-color:gray;
    padding:20px;
}

#main2 {
    height:100vh;
}



a:link {
    text-decoration:none;
}

如何正确对中？

Answer 1

添加

text-align: center;

到周围的一个div。这解决了我在网站上遇到的类似问题。

Answer 2

希望这个帮助你在课堂上我认为它是注册内容只需添加text-align: center;

现在您的代码应该是

#signUp {
    position:absolute;
    margin:auto;
    vertical-align:middle;
    text-align:center;
}

Answer 3

HTML Diet

让我们剥离您的HTML：

<section id="main1">           
     <a href="">Sign up as a chef!</a>
     <a href="">Sign up as a client!</a>                 
</section>

好多了！

Sprinkle of CSS

该部分垂直居中，position: absolute以及左，右，上，下和margin: auto的组合。

#main1 {
  font-family: Helvetica;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 1em;
}
#main1 a {
  color: #FFF;
  padding: 10px;
  background: #e91e63;
}

完整示例

＆＃13;

#main1 {
  font-family: Helvetica;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 1em;
}
#main1 a {
  color: #FFF;
  padding: 10px;
  background: #e91e63;
}

＆＃13;

<section id="main1">

  <a href="">Sign up as a chef!</a><a href="">Sign up as a client!</a>

</section>

＆＃13;

Answer 4

HTML文件

<div id="signUpContainer">
     <div id='signUp' class='signUp'>
           <a href="">Sign up as a chef!</a>
     </div>
     <div id='signUp' class='signUp'>
           <a href="">Sign up as a client!</a>
     </div>
</div>

CSS文件

#signUpContainer {
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
    vertical-align:middle;
    width: 20%;
    height: 100px;
    background-color: red;
}

#signUp {
    display: inline-block;
    margin: auto;
    width: 100px;
    border-style:solid;
    border-width:5px;
    background-color:gray;
    padding: 20px;
}

亲自尝试并根据自己的喜好进行编辑。我基本上做的是我在div而不是桌子上设置样式（在你的例子中）。

使用CSS，我不能让我的div表位于屏幕中间

4 个答案:

HTML Diet

Sprinkle of CSS

完整示例