CODEWITHSUNDEEP
htmlcss
fhc
fhc

Reputation: 3

How can center button without being off center in mobile view CSS?

I have css button and class for div how can i center it , because in chrome mobile view inspector it is off centered.

.container-bottomnav100-form-btn {
  width: 100%;
  width: 60;
  height: 60;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  margin-left: 50%;
  margin-right: 50%;
} 

.bottomnav100-form-btn {
  font-family: Ubuntu-Bold;
  font-size: 32px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: 60px;
  height: 60px;
  background-color: #4881ec;
  border-radius: 3px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

i did margin-left and margin-right to 50% but as said mobile view its off centered.

Upvotes: 0

Views: 204

Answers (1)

Abdelrahman Hatem
Abdelrahman Hatem

Reputation: 1036

For centering flex container remove horizontal margins and use css property justify-content: center;

Update your CSS with following code

.container-bottomnav100-form-btn {
  width: 100%;
  width: 60;
  height: 60;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
} 

.bottomnav100-form-btn {
  font-family: Ubuntu-Bold;
  font-size: 32px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: auto;
  height: 60px;
  background-color: #4881ec;
  border-radius: 3px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

Upvotes: 2

Related Questions