Only center one of two elements in a div?

Question

Only center one of two elements in a div?

I have a simple webpage with a string .topnavand .containerwith a few elements in it. I am trying to center only .container, and not .topnav, within the bodypage so that it is vertically centered. However, when I tried the style bodywith:

display:flex;
align-items:center;
justify-content:center;

Both .topbarand .containerare centered. How to place a vertical vertical layout .container?

body,
html {
  height: 100%;
}

.contact_box {
  text-align: center;
  background-color: red;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  height: 20em;
  width: 25em;
  box-shadow: 1px 1px 6px #757677;
  float: left;
}

.contact_box img {
  margin-top: 3.3em;
  margin-bottom: 1.2em;
  height: 3em;
  width: 3em;
}

.contact_box h3 {
  color: #6d6d6d;
}

#contact .container {
  display: flex;
  align-items: center;
  justify-content: center;
}

<body id="contact">
  <div class="topnav" id="myTopnav">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="#" class="selected">Contact</a>
    <a class="icon" onclick="myFunction()">&#9776;</a>
  </div>

  <div class="container">
    <div class="row" id="contact_section">
      <div class="contact_box" class="col-md-4">
        <a href="https://github.com/" target="_blank"><img src="resources/github_logo.png" alt="Github"></a>
        <br>
        <h3>GitHub</h3>
      </div>

      <div class="contact_box" class="col-md-4">
        <a href="https://www.linkedin.com" target="_blank"><img src="resources/linkedin_logo.png" alt="LinkedIn"></a>
        <h3>LinkedIn</h3>
      </div>

      <div class="contact_box" class="col-md-4">
        <img src="resources/email_icon.png" alt="EMAIL">
        <h3>Email</h3>
      </div>
    </div>
  </div>
</body>

Run code Hide result

Here's what it looks like now:

+4

html css flexbox css3 centering

nezdiro Oct 20 '17 at 19:48

source share

2 answers

Federico · Answer 1 · 2017-10-20T20:10:13+0000

Hi, to vertically align in the middle of the page, set the container height to 100% of the viewport:

#contact .container {
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

showdev · Answer 2 · 2017-10-20T20:24:42+0000

, , :
, , .

:

<body> : .topnav .container. flex justify-content: flex-start ( ), .container , flex flex-grow:1.

.container .row . justify-content: center align-items: center .

.row (flex-direction: row ), .contact_box . justify-content: center.

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.contact_box {
  background-color: red;
  border: 1px solid #c0c0c0;
  border-radius: .5em;
  box-shadow: 1px 1px 6px #757677;
  padding: 1em 2em;
  text-align: center;
}

.contact_box h3 {
  margin: .25em 0 0;
}

<div class="topnav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#" class="selected">Contact</a>
  <a class="icon">&#9776;</a>
</div>

<div class="container">

  <div class="row">

    <div class="contact_box">
      <a href="https://github.com/" target="_blank"><img src="resources/github_logo.png" alt="Github"></a>
      <br>
      <h3>GitHub</h3>
    </div>

    <div class="contact_box">
      <a href="https://www.linkedin.com" target="_blank"><img src="resources/linkedin_logo.png" alt="LinkedIn"></a>
      <h3>LinkedIn</h3>
    </div>

    <div class="contact_box">
      <img src="resources/email_icon.png" alt="EMAIL">
      <h3>Email</h3>
    </div>

  </div>

</div>

Hide result

:

.row, :

Only center one of two elements in a div?

More articles: