Question

html,body, {
    height:100%;
    background-color: white;
}
.main{
  height: 100%;
  width: 100%;
}
.col-md-6{
  height: 100%;
  width: 100%;
  background-color: grey;
  background-size: cover;
}

<!DOCTYPE html>
<html>
<head>
<title>Home</title>

<link rel="stylesheet" href="core/css/main.css"/>
<link rel="stylesheet" href="core/node_modules//bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="core/node_modules/font-awesome/css/font-awesome.min.css" type="text/css"/>
</head>

<body>

<section id="main" class="container">
  <div class="row">
    <div class="col-md-6">
      <h1>Meubels</h1>
    </div>
    <div class="col-md-6">
      <h1>Meubels</h1>
    </div>
  </div>
</section>

</body>
</html>

我想制作一个页面，让您可以选择访问网站a或网站b。我脑子里有一个设计，但是无法弄清楚如何将两个div组成一排，让它们垂直覆盖页面，并在两个div内部水平和垂直居中。我尝试了各种各样的东西，但似乎没有任何帮助。

我已经在脑海中看到了如何看到这个画面的图像。

有人可以帮助我吗？

Answer 1

实际上有很多方法可以实现这一点，具体取决于偏好。检查此链接，根据您编写代码的方式https://css-tricks.com/centering-css-complete-guide/

，它有多种方法可以集中内容

Answer 2

您可以像这样使用flexbox：

echo "3"

exit

/*Demo*/
body {
  margin: 0;
}
.col:first-child {
  border-right: 1px solid black;
}

/*Relevant CSS*/

.row {
  display: flex; /* Create flex context for children */
  height: 100vh;
}
.col {
  flex: 1; /* Distribute free space between columns*/
  display: flex; /* Make flex-container to align content */
  justify-content: center; /* Align horizontally*/
  align-items: center; /* Align vertically*/
}

Answer 3

＆＃13;

html,body {
    height: 100%;
    margin: 0;
    padding: 0; 
    }

    .website1 {
    width: 50%;
    height: 100%;
    background: red;
    display: inline-block;
    float: left;
    position:relative;
    }

    .website2 {
    width: 50%; 
    height: 100%;
    background: green;
    display: inline-block;  
    float: left;
    position: relative;
    }

    .content {
        width: 200px;
        height: 200px;
        background-color: blue;
        position:absolute;
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;
        max-width:50%;
        max-height:50%;
        overflow:auto;
    }

    .container {
    height: 100%;
    }

    .content p {
    text-align: center;
    line-height: 200px;
    margin: 0;
    padding: 0;
    }

＆＃13;

<html>
<head>
</head>
<body>
    <div class='container'>
    <div class='website1'>
        <div class='content'>
            <p>Website 1</p>
        </div>
    </div>
    <div class='website2'>  
        <div class='content'>
            <p>Website 2</p>
        </div>
    </div>
</div>
</body>
</html>

＆＃13;

Answer 4

＆＃13;

html,body {
    height:100%;
    background-color: white;
}
#main{
  height: 100%;
  width: 100%;
}
.row {
  height: 100%;
}
.col-md-6{
  position: relative;
  height: 100%;
  width: 49%;
  display: inline-block;
  background-color: grey;
  background-size: cover;
}
.col-md-6 h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Home</title>

<link rel="stylesheet" href="core/css/main.css"/>
<link rel="stylesheet" href="core/node_modules//bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="core/node_modules/font-awesome/css/font-awesome.min.css" type="text/css"/>
</head>

<body>

<section id="main" class="container">
  <div class="row">
    <div class="col-md-6">
      <h1>Meubels</h1>
    </div>
    <div class="col-md-6">
      <h1>Meubels</h1>
    </div>
  </div>
</section>

</body>
</html>

＆＃13;

这个会奏效。您也可以使用flexbox来居中h1

连续两个div，文本位于中心

4 个答案: