Center the "join" text


#1

Hi,

I feel silly for asking this because I bet it will be such a simple fix.

In section 5 were you need to create a button I cant seem to center the "join" text to the middle of the button (text will go to the center, but no equal padding on the top and bottom).

I have also attempted to use 'padding' to create the size of the button, but for some reason it will reach along the whole page.

Here is my HTML and CSS. It is the section down the bottom named "join".

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="container">
        
        <ul class="nav">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/junction/logo.svg" class="logo"/>
          <li>About</li>
          <li>Blog</li>
          <li>Help</li>
          <li>Contact</li>
        </ul>
       
      </div>
    </div>


    <div class="jumbotron">
      <div class="container">
        <h1>
          Meet Junction
        </h1>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
       <div class="row">
         <div class="col-md-4">
           <img src="https://s3.amazonaws.com/codecademy-content/projects/junction/read.svg" class="pics"/>
           <h2>
             Read
           </h2>
           <p>
             Discover new stories and follow your favorite writers.
           </p>
         </div>
         
         <div class="col-md-4">
           <img src="https://s3.amazonaws.com/codecademy-content/projects/junction/write.svg" class="pics"/>
           <h2>
             Write
           </h2>
           <p>
             Create stories about our world, or entirely new worlds.
           </p>
         </div>
        
         <div class="col-md-4">
           <img src="https://s3.amazonaws.com/codecademy-content/projects/junction/talk.svg" class="pics"/>
           <h2>
             Talk
           </h2>
           <p>
             Join the conversation by talking with your favorite readers and your fans.

           </p>
         </div>
         
        </div>
        
      </div>
    </div>
    
    <div class="join">
    <div class="container">
      
        <a href="#">Join</a>
      
      </div>
    </div>
    
    
  </body>
</html>

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Merriweather', serif;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/junction/bg.jpg) no-repeat center fixed;
  background-size: cover;
}


.container {
  max-width:940px;
}

/* Header */
.header {
  padding: 10px 0;
  background: rgba(0,0,0,.5);
}

.logo {
  height: 36px;
  padding: 0 8px;
}

.nav {
  display:inline-block;
    margin:0;
    padding:8px 0;
    list-style:none;
}


.nav li {
    color:#fff;
  display:inline;
    margin:20px;
    padding:0 0 5px;
}

.nav li:hover {
  color: #00ffbc;
  cursor: pointer;
  border-bottom:1px solid;
  
}

/* Jumbotron */
.jumbotron {
  color: white;
  position: relative;
  top: 50px;
  text-shadow: 0 2px 3px rgba(0,0,0,.4);
  background: none;
  text-align: center;
}

/* Supporting */
.supporting {
  padding: 10px;
}

.supporting .container {
  color: white;
  text-align: center;
  margin-top: 40px;
  text-shadow: 0 2px 3px rgba(0,0,0,.4);
  margin-left:auto;
  margin-right:auto;
}

.pics {
  height: 150px;
}

.join {
  position: relative;
  padding: 40px;
}

.join .container {
  background: rgba(0,255,188,0.5);
  border-radius: 8px;
  height: 40px;
  width: 150px;
  text-align: center;
  color: white;
}

.join .container a {
  text-align: center;
  color: white;
  text-decoration: none;
  font-size: 18px;
  letter-spacing: 1.3px;
}

.join .container:hover {
  background-color: rgba(0,155,88,0.5);
  cursor: pointer;
}

#2

I need to do a full scale review of my CSS skills as I've fallen woefully behind. In the olden days here is how I would go about vertically centering text in a button class...

.button {
    width: 12em;
    line-height: 3em;
    font-size: 1em;
    text-align: center;
}

Without examining the project directly, I cannot say that this will be a solution in your case, but it is worth a try. Meanwhile, I'm going to do some reading on Flex and see if there is a more modern solution.


#3

Thank you!

That does work in this situation.

But I was also wondering if there is a way to automatically create an equal margin for the text with CSS, if anyone knows?
For example, if you didn't know the value of EM to add to the 'line height' section to set it in the middle (if that makes sense haha).


#4

Text is inline (similar to <span></span> or <a></a>) and consequently does not have top or bottom properties, and hence no margin or padding above or below.

In my example I used em units, which are relative to the parent container. If the parent has a font size of 16px, then 1em will be equivalent to 16px. The term em refers to the width and height of an upper case M in the current font-size. I stress the relation to the parent.

Modern CSS offers us a more important proportional unit, rem which is relative to the root element (<body></body>) which allows us to more liberally use the unit. Read up on these units to gain a deeper understanding of their use and advantages (which may be few, nowadays, but I still prefer them).

Extra reading, with respect to Flexbox (which I'll be studying closely over the next few days).

https://www.google.ca/search?q=flex+vertical+justify


#5

Try this out in your browser:

<!doctype html>
<html>
<head>
<title>Using Flexbox to justify button text</title>
<style>
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12em;
    height: 3em;
    border: 2px solid teal;
}
</style>
</head>
<body>
<div class="button">
Button Text
</div>
</body>
</html>

#6

Mtf you are great, thank you!

Using both methods works for me. I've also been reminded that EM exists haha.

I will have a good read on using Flexbox as well!

You've been a great help, thanks again.


#7

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.