Text not getting center aligned in button-CodePudding

I am very new to css and i am trying to align the text center in the button, but i am not able to get it centered. Please look into my code and help me to fix it.

.new-btn{
  clear:both;
  white-space:nowrap;
  display: inline-block;
  height: 60px;
  min-width: 270px;
  float: left;
  align-items: center;
  justify-content: center;
  margin: 10px 5px;
  overflow: hidden;
  background: #fff;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease-out;
}
.new-btn > span, .new-icn > i {
   float:left;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
  line-height:1em
}
.new-icn > i{
  display: inline-block;
  height: 60px;
  width: 60px;
  text-align: center;
  border-radius: 50px;
  box-sizing: border-box;
  line-height: 60px;
  transition: all 0.3s ease-out;
  font-size: 25px;
  line-height: 60px;
  transition: all 0.3s ease-out;
  color: #fff;
}
.new-btn > span{
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 550;
  line-height: 60px;
  margin-left: 10px;
  transition: all 0.3s ease-out;
  
}
.new-yt > i {
background: #ff0000;
}
.new-yt > span {
color: #ff0000;
}
<a  href="#"><i ></i><span>Youtube</span></a>

text-align: center; is also not working. I have been trying to fix this for hours but still no luck. The result look like this

CodePudding user response：

did some changes to your css instead of inline block i used flex and for the span it takes the width of 100% and reduced double the size of red circle width it also has display f;ex in it to justify the text to the center

.new-btn {
  clear: both;
  white-space: nowrap;
  display: flex;
  height: 60px;
  min-width: 270px;
  float: left;
  align-items: center;
  justify-content: flex-start;
  margin: 10px 5px;
  overflow: hidden;
  background: #fff;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-out;
}

.new-btn>span,
.new-icn>i {
  float: left;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  line-height: 1em
}

.new-icn>i {
  display: inline-block;
  height: 60px;
  width: 60px;
  text-align: center;
  border-radius: 50px;
  box-sizing: border-box;
  line-height: 60px;
  transition: all 0.3s ease-out;
  font-size: 25px;
  line-height: 60px;
  transition: all 0.3s ease-out;
  color: #fff;
}

.new-btn>span {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 550;
  line-height: 60px;
  margin-left: 10px;
  transition: all 0.3s ease-out;
  display: flex;
  justify-content: center;
  width: calc(100% - 120px);
}

.new-yt>i {
  background: #ff0000;
}

.new-yt>span {
  color: #ff0000;
}

<a  href="#"><i ></i><span>Youtube</span></a>

CodePudding user response：

span is an inline element, so you need to set it to inline-block, then set its width and finaly text-align:center
p/s: research about flex. it will make your life easier

CodePudding user response：

Altered the code a bit, making the outside container a flex and centring the text as a span.

using the ::before treatment for the red circle element it is absolutely positioned and will ignore the 'Youtube' text

.new-btn{
  clear:both;
  position:relative;
  white-space:nowrap;
  display: flex;
  height: 60px;
  min-width: 270px;
  float: left;
  align-items: center;
  justify-content: center;
  margin: 10px 5px;
  overflow: hidden;
  background: #fff;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease-out;
}
.new-btn > span, .new-icn > i {
   float:left;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
  line-height:1em
}
.new-icn::before{
  content:"";
  display:inline-block;
  position:absolute;
  left:0;
  top:0;
  height: 60px;
  width: 60px;
  text-align: center;
  border-radius: 50px;
  box-sizing: border-box;
  line-height: 60px;
  transition: all 0.3s ease-out;
  font-size: 25px;
  line-height: 60px;
  transition: all 0.3s ease-out;
  color: #fff;
  background-color: #ff0000;
}
.new-btn > span{
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 550;
  line-height: 60px;
  margin-left: 10px;
  transition: all 0.3s ease-out;
  
}
.new-yt > i {
background: #ff0000;
}
.new-yt > span {
color: #ff0000;
}
.text{
display:flex;
}

<a  href="#"><span >Youtube</span></a>