你的CSS没有居中对齐。有没有解决方法？

huangapple
go评论102阅读模式
英文:

My css is not centering. Is there a way around this?

问题

  1. .pop span

的文本未居中，而是保持在边缘。这是为什么？如果知道，请回复。

英文:

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:

  1. @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
  2. body {
  3.     font-family: Montserrat, sans-serif;
  4. }
  5. h1{
  6.   -webkit-user-select: none; 
  7.   -ms-user-select: none; 
  8.   user-select: none;
  9.   text-align : center;
  10. }
  11. article {
  12.   text-align : justify;
  13.     overflow:auto;
  14.     line-height: 1.5;
  15.   height : 70vh;
  16.   margin : auto;
  17.   font-family: Montserrat, sans-serif;
  18. outline : none;
  19.   width : 85%;
  20. }
  21. .outer {
  22.     display : flex;
  23. }
  24. .pops {
  25.   padding : 0px 15px;
  26. }
  27. .pop span {
  28.   text-align:center;
  29.   font-size : 20px;
  30.   color : #444;
  31. text-align: center;
  32. }
  34. .pop{
  35.   transition: .5s;
  36.   width: 120px;
  37.   height : 70px;
  38.   border-radius: 5px;
  39.   border: 1px solid #BFBFBF;
  40.   background-color: white;
  41.   
  42. }
  43. .pop:hover {
  44.   background-color : #eae8ff;
  45. }

html:

  1. <h1> StreamLine </h1>
  2. <div class = "outer"> 
  3. <article class = "child" id = "text" data-gramm="false"
  4. data-gramm_editor="false"
  5. data-enable-grammarly="false" contenteditable = "true" spellcheck = "true"> Write your amazing words here! </article>
  6.   <div class = "pops" > <div class = "pop"> <span class = "inner" id="words">0</span></div></div>
  7. </div>
  8.

I wanted the text in the

  1. .pop span

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

答案1

得分: 1

将以下内容添加到您的CSS中的“.pop span”部分：

  1. display: flex;
  2. justify-content: center;
英文:

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

  1. display: flex;
  2. justify-content: center;

huangapple
  • 本文由 发表于 2023年5月7日 05:14:15
  • 转载请务必保留本文链接：https://go.coder-hub.com/76191166.html
  • css
  • flexbox
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定