CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mike Randell
Mike Randell

Reputation: 43

Centering text in HTML+CSS, one part of <div> is moving but other is not

HTML:

<div class="pageOne text-center">
    <div class="block1 text-center">
        <h1>Michael Randell</h1>
        <h3>Growth, Truth, Balance</h3>
    </div>
    <div class="btnList text-center">
        <a class="btn btn-default" href="#">Twitter</a>
        <a class="btn btn-default" href="#">GitHub</a>
        <a class="btn btn-default" href="#">Linkedin</a>
        <a class="btn btn-default" href="#">FreeCodeCamp</a>
    </div>  
</div>

CSS: 

.pageOne {
    background: url("http://worldmustwakeup.com/wp-content/uploads/2015/11/astronaut-outer-space-moon-nasa-astronauts-free-208100.jpg") center;
    height: 1000px;
    width: 100%;
    background-size: cover;
}

.block1 {
    background-color: black;
    opacity: .5;
    padding: 15px; 
    margin-bottom: 20%;
}

This is my CodePen:

http://codepen.io/mikerand/pen/QjRVYP

I'm beginner making my first profile page but I am stuck now.

I am trying to get the text with my name and buttons moved down the page...Not totally centered but a little bit above center. The problem is that when I try to change the margin, only the buttons move down the page. I do want a little bit of space between my name and the buttons but I can't get my name moved down.

Can anyone help a noob out? Thanks!

Upvotes: 3

Views: 45

Answers (1)

Ash
Ash

Reputation: 2605

May be adding a top padding will do the trick for you.

.block1 {
  background-color: black;
  opacity: .5;
  padding: 15px; 
  margin-bottom: 20%;
  padding-top: 15%;    
}

codepen : http://codepen.io/anon/pen/YwwMgL

Upvotes: 1

Related Questions