Fast help, button posistion

Status
This thread has been locked.
FelixDev

FelixDev

Typical Developer and Designer
Premium
Feedback score
9
Posts
1,113
Reactions
331
Resources
0
Hello, I am trying to position my button at centre horizontal and middle under my "top" div (Div, where the background image is as u kind of not, can see).
Well well its not working out lol
9cec02cc5b1823d1cf143177967a1d11.png

I want it to be more down. Well idk how here is my css
Code: 
.btn-1 {
  padding: 1%;
  font-size: 50px;
  display: block;
  cursor: pointer;
  font-family: Roboto;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  background-color: #151515;
  border: none;
  margin-left: auto;
  margin-right: auto;
  color: white;
}
HTML: 
  <div class="button">
    <button class="btn-1" type="button" name="button">Learn More</button>
  </div>
 
Click to expand...
PebbleHost
High performance, consistent uptime and fast support. Minecraft hosting that just works.
FelixDev

FelixDev

Typical Developer and Designer
Premium
Feedback score
9
Posts
1,113
Reactions
331
Resources
0
FelixDev

FelixDev

Typical Developer and Designer
Premium
Feedback score
9
Posts
1,113
Reactions
331
Resources
0
FelixDev

FelixDev

Typical Developer and Designer
Premium
Feedback score
9
Posts
1,113
Reactions
331
Resources
0
FelixDev

FelixDev

Typical Developer and Designer
Premium
Feedback score
9
Posts
1,113
Reactions
331
Resources
0
FelixDev

FelixDev

Typical Developer and Designer
Premium
Feedback score
9
Posts
1,113
Reactions
331
Resources
0
anyone that got time add me on dc. It'll be easier L00ting#8928[DOUBLEPOST=1543856975][/DOUBLEPOST]
Kuchy said:
Post your code for both your top div and anything dealing with that button. There's something else interfering with your margin-top;
Click to expand...
HTML: 
<body>
  <div class="left">
    <h1>Felix "L00ting"</h1>
    <h3>Studying to become a Web-Developer</h3>
    <h3>Languages JS, CSS, HTML, PHP</h3>
  </div>
  <div class="right">
  </div>
  <div class="button">
    <button class="btn-1" type="button" name="button">Learn More</button>
  </div>
</body>

</html>
CSS
Code: 
@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
  padding: 0;
  margin: 0 auto;
}

body, html {
  height: 100%;
}

.left {
  display: inline-block;
  overflow: hidden;
  float: left;
  width: 100%;
  background-color: #151515;
  height: 70%;
}

.right {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  float: right;
  width: 100%;
  background-image: url("https://i.imgur.com/kHfsg7b.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-clip-path: polygon(64% 0, 100% 0%, 100% 98%, 34% 100%);
  clip-path: polygon(64% 0, 100% 0%, 100% 98%, 34% 100%);
  height: 70%;
}

.left h1 {
  font-family: Roboto;
  color: white;
  font-size: 50px;
  font-family: monospace;
  margin-left: 8%;
  margin-top: 10%;
}

.left h3 {
  font-family: Roboto;
  color: white;
  font-size: 17px;
  margin-left: 8%;
  margin-top: 1%;
}

.btn-1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  cursor: pointer;
  padding: 1%;
  font-size: 50px;
  font-family: Roboto;
  background-color: #151515;
  border: none;
  margin-left: auto;
  margin-right: auto;
  color: white;
}
 
FelixDev

FelixDev

Typical Developer and Designer
Premium
Feedback score
9
Posts
1,113
Reactions
331
Resources
0
Kuchy said:
The reason it didn't work is cause of the left and right floats on the top div.
Instead you'll have to add position: relative to the button then top: #px;

Now it works.
Click to expand...
omfg, thanks lol
 
Harry

Harry

Rustacean
Management
Feedback score
10
Posts
1,606
Reactions
876
Resources
0
Kuchy said:
tried that on the jsfiddle. Didn't seem to work. I think it's cause his left and right divs are just out there and not in a containing div.
Click to expand...
Ah, ok. Seems to be working for me so I'm not sure what's going on haha (jsfiddle link in the message above)
 
Status
This thread has been locked.
Top