时间戳

首页 > 解决方案 > 在框中居中文本

html - 在框中居中文本

问题描述

所以我一直在努力解决这个问题。

我正在尝试将文本水平居中。如果您查看此图像，您会看到图标完全居中，而文本一直位于框的右侧。由于某种原因，使用text-align: center不起作用。如何使文本位于框的中心？

/* CSS Variables */
:root {
  --black: #282e34;
  --main-grey: #666666;
  --second-grey: #92999f;
  --main-white: #ffffff;
  --second-white: #f4f4f4;
  --blue: #0a9797;
}

/* Resets */
html, body {
  height: 100%;
  margin: 0;
  font-family: 'Roboto';
}


h2 {
  color: var(--blue);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.content {
  background-color: var(--second-white);
  color: var(--main-grey);
  text-align: center;
  padding: 50px 50px;
}

/* Icons */
.skills {
  display: grid;
  grid-template: 
  "hi ht"
  "ci ct"
  "ji jt"
  "gi gt";
}

.fa-html5, .fa-css3-alt, .fa-js,
.fa-github {
  font-size: 5em;
}

.icons-text {
  display: flex;
  align-items: center;

  font-family: 'Roboto';
  font-size: 14px;
  color: var(--main-grey);
  text-align: right;
}

.fa-html5 {
  color: #f16529;
  grid-area: hi;
}

.fa-css3-alt {
  color: #369cd6;
  grid-area: ci;
}

.fa-js {
  color: #f1be21;
  grid-area: ji;
}

.fa-github {
  color: #666666;
  grid-area: gi;
}

#html5-text {
  grid-area: ht;
}

#css3-text {
  grid-area: ct;
}

#js-text {
  grid-area: jt;
}

#github-text {
  grid-area: gt;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="style.css" type="text/css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300,400,500,700,900" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">
  <script src="main.js" type="text/javascript"></script>
  <title>Title</title>
</head>

<body>
  <section class="content">
    <h2>Skills</h2>

    <div class="skills">
      <div class="icons">
        <i class="fab fa-html5"></i>
      </div>
      <h2 id="html5-text" class="icons-text">HTML5</h2>

      <div class="icons">
        <i class="fab fa-css3-alt"></i>
      </div>
      <h2 id="css3-text" class="icons-text">CSS3</h2>

      <div class="icons">
        <i class="fab fa-js"></i>
      </div>
      <h2 id="js-text" class="icons-text">Javascript</h2>

      <div class="icons">
        <i class="fab fa-github"></i>
      </div>
      <h2 id="github-text" class="icons-text">GitHub</h2>
    </div>

  </section>
</body>

</html>

标签： htmlcss

解决方案

删除的代码行：

display: flex;
align-items: center;

更改的代码行：

text-align: center;

修改后的代码：

.icons-text {
  font-family: 'Roboto';
  font-size: 14px;
  color: var(--main-grey);
  text-align: center;
}


:root {
  --black: #282e34;
  --main-grey: #666666;
  --second-grey: #92999f;
  --main-white: #ffffff;
  --second-white: #f4f4f4;
  --blue: #0a9797;
}

/* Resets */
html, body {
  height: 100%;
  margin: 0;
  font-family: 'Roboto';
}


h2 {
  color: var(--blue);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.content {
  background-color: var(--second-white);
  color: var(--main-grey);
  text-align: center;
  padding: 50px 50px;
}

/* Icons */
.skills {
  display: grid;
  grid-template: 
  "hi ht"
  "ci ct"
  "ji jt"
  "gi gt";
}

.fa-html5, .fa-css3-alt, .fa-js,
.fa-github {
  font-size: 5em;
}

.icons-text {
  font-family: 'Roboto';
  font-size: 14px;
  color: var(--main-grey);
  text-align: center;
}

.fa-html5 {
  color: #f16529;
  grid-area: hi;
}

.fa-css3-alt {
  color: #369cd6;
  grid-area: ci;
}

.fa-js {
  color: #f1be21;
  grid-area: ji;
}

.fa-github {
  color: #666666;
  grid-area: gi;
}

#html5-text {
  grid-area: ht;
}

#css3-text {
  grid-area: ct;
}

#js-text {
  grid-area: jt;
}

#github-text {
  grid-area: gt;
}
  <link href="style.css" type="text/css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300,400,500,700,900" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">
   
   <section class="content">
    <h2>Skills</h2>

    <div class="skills">
      <div class="icons">
        <i class="fab fa-html5"></i>
      </div>
      <h2 id="html5-text" class="icons-text">HTML5</h2>

      <div class="icons">
        <i class="fab fa-css3-alt"></i>
      </div>
      <h2 id="css3-text" class="icons-text">CSS3</h2>

      <div class="icons">
        <i class="fab fa-js"></i>
      </div>
      <h2 id="js-text" class="icons-text">Javascript</h2>

      <div class="icons">
        <i class="fab fa-github"></i>
      </div>
      <h2 id="github-text" class="icons-text">GitHub</h2>
    </div>

  </section>

推荐阅读