R.de.VRIES R.de.VRIES - 1 year ago 53
CSS Question

Two divs, in a row, with text in the center



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>





I want to make a page that lets you make a choice to either go to website a or website b. I have a design in my head, but can't figure out how to make two divs into a row, have them vertically cover the page and have text horizontally and vertically center inside both divs. I have tried all sort of things, but nothing seems to help.

I have included an image of how I see this screen in my head.

Can someone please help me?enter image description here

Answer Source

You can use flexbox like so:

/*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*/
}
<section class="row">
  <div class="col">
    Website 1
  </div>
  <div class="col">
    Website 2
  </div>
</section>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download