I am trying to have a container inside the footer. I am able to position it to the left and right but i am not sure why its not going into the middle

Question

I am able to change the float to right and left and the effect apply but when i put in center it does not go there. I am trying to align the container to the center, Not sure when i am going wrong here. I am new to HTML and CSS and the enviorment i am running is sharepoint

.footer {
clear:both;
font-family: 'McLaren', cursive;
background-color:black;
text-align:center;
height:50px;
padding-top: 10px;
box-sizing: border-box;
}

.Book {
  float:right;
  position:relative;
  width: 20%;
  padding:0px;
  height:40px;
  text-align:center;
}

<div class="footer">
  <div class="Book" style="background-color:Grey;">

Does this answer your question? [How to horizontally center a
](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div) — Lewis, Dec 13 '19 at 14:48
Replace your css: .footer { clear:both; font-family: 'McLaren', cursive; background-color:black; text-align:center; height:50px; padding-top: 10px; box-sizing: border-box; } and .Book { width: 20%; background-color: grey; display: inline-block; position:relative; padding:0px; height:40px; } — AreEl, Dec 13 '19 at 15:03

score 1 · Answer 1 · edited Dec 13 '19 at 14:51

1

Instead of

float: right;

Use

margin: auto;

edited Dec 13 '19 at 14:51

Paulie_D

107,962
13
142
161

answered Dec 13 '19 at 14:50

1

I put it as margin: 0 auto; but nothing changed – Jake Dec 13 '19 at 14:54
I have never used sharepoint so all I can suggest is to try it without the "0". – Dec 13 '19 at 14:57
1

Fixed it, I had to change the position to relative. Thanks for the help though – Jake Dec 13 '19 at 15:00

I am trying to have a container inside the footer. I am able to position it to the left and right but i am not sure why its not going into the middle

1 Answers1