1

I am making a text editor, and I have a work counter. I want to center the word counter in my popup box, and it is not centering. Here is the code:

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body {
    font-family: Montserrat, sans-serif;
}
h1{
  -webkit-user-select: none; 
  -ms-user-select: none; 
  user-select: none;
  text-align : center;
}
article {
  text-align : justify;
    overflow:auto;
    line-height: 1.5;
  height : 70vh;
  margin : auto;
  font-family: Montserrat, sans-serif;
outline : none;
  width : 85%;
}
.outer {
    display : flex;
}
.pops {
  padding : 0px 15px;
}
.pop span {
  text-align:center;
  font-size : 20px;
  color : #444;
text-align: center;
}

.pop{
  transition: .5s;
  width: 120px;
  height : 70px;
  border-radius: 5px;
  border: 1px solid #BFBFBF;
  background-color: white;
  
}
.pop:hover {
  background-color : #eae8ff;
}

html:

<h1> StreamLine </h1>
<div class = "outer"> 
<article class = "child" id = "text" data-gramm="false"
data-gramm_editor="false"
data-enable-grammarly="false" contenteditable = "true" spellcheck = "true"> Write your amazing words here! </article>
  <div class = "pops" > <div class = "pop"> <span class = "inner" id="words">0</span></div></div>
</div>

I wanted the text in the

.pop span

to center, but it didn't. Instead, it stayed at the edge. Does anyone know why this happened? If so, please reply.

user21717124
  • 11
  • 1

1 Answers1

1

add the following to your CSS at ".pop span":

display: flex;
justify-content: center;
HelloWorld
  • 11
  • 2