html - 尝试在页面中间对齐我的选项卡并尽可能添加标题？

Question

我制作了一个标签，其中包含 3 个图像作为按钮。我似乎无法在中间对齐它，所以我只是将它边缘化，我知道这是不正确的方法。另外，我试图在它下面加上描述按钮是什么的标题，但我也单独和“手动”做了这件事，我知道这也是不正确的，但我只是想看看它们看起来如何美观。我可以以某种方式将标题附加到按钮吗？另外，如果可能的话，我希望在我的选项卡中的每个按钮之间留出大约 50px 的空间，但我似乎也无法弄清楚。

我正在以一种非常不专业的方式使用 bootstrap 来对齐东西，需要澄清或正确的对齐方式。我将发布我的代码和我正在谈论的图片。谢谢你!

Here is the output I have but it is all done manually using margin and bootstrap, when the computer screen is made smaller and bigger it starts looking very messy.

.box {
  width: 100%;
  height: 700px;
  background-color: #f6f6f6;
  margin-bottom: 40px;
}

.tab {
  opacity: 0.8;
  padding: 100px 0px 0px 0px;
  margin-left: 200px;
  width: 100%;
  display: inline-block;
}


/* Style the buttons that are used to open the tab content */

.tab button {
  background-color: inherit;
  float: left;
  border-color: grey;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.4s;
  font-size: 35px;
  tab-spacing: 30px;
  color: rgb(105, 105, 105);
}

.resumeicon {
  width: 253px;
}

.coverlettericon {
  width: 250px;
}

.interviewicon {
  width: 250px;
}

.ressettings {
  font-family: 'Satisfy', cursive;
  font-size: 30px;
  color: dimgrey;
  text-align: center;
}

.coversettings {
  font-family: 'Satisfy', cursive;
  font-size: 30px;
  color: dimgrey;
  text-align: center;
  margin-left: 50px;
}

.intsettings {
  font-family: 'Satisfy', cursive;
  font-size: 30px;
  color: dimgrey;
  text-align: center;
  margin-left: 30px;
}

.hint {
  font-family: 'Coiny', Serif;
  font-size: 40px;
  text-align: center;
  color: navy;
  padding-top: 60px;
  margin: 0px 150px 0px 150px;
}

<div class="box">
  <div class="hint">Looks through Resumés, Cover Letters, and Interview Questions in the field you chose...</div>

  <!-- THIS IS WHERE THE RESUME/COVER LETTER/INTERVIEW ICONS START -->

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-10">
        <div class="tab">
          <button class="tablinks" onclick="openTab(event, 'Resume')"><img class="resumeicon" src="/Users/mtaslagyan/Desktop/resumania/images/resumeicon.PNG"></button>
          <button class="tablinks" onclick="openTab(event, 'CoverLetter')"><img class="coverlettericon" src="/Users/mtaslagyan/Desktop/resumania/images/coverlettericon.PNG"></button>
          <button class="tablinks" onclick="openTab(event, 'Interview')"><img class="interviewicon" src="/Users/mtaslagyan/Desktop/resumania/images/interviewicon.PNG"></button>
        </div>
        <div class="col-md-1"></div>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3"></div>
      <div class="col-md-2 ressettings" align="center">Resumé</div>
      <div class="col-md-2 coversettings" align="center">Cover Letter</div>
      <div class="col-md-2 intsettings" align="center">Interview Questions</div>
      <div class="col-md-3"></div>
    </div>
  </div>
</div>

我知道其中很多内容很不专业，但我只是想展示我希望输出的样子，有没有办法让它更高效、更专业？

Answer 1

是的，你是对的。这是不专业的方式。你写了这么多你自己的自定义 CSS。 Bootstrap 的目的基本上是为了减少编写自己的 css 的负载。 Bootstrap 在每种屏幕类型中都能为您做很多事情。当你使用 bootstrap 时，这意味着应该有尽可能多的小 css。

你应该使用如下:

<div class="box">
        <div class="hint">Looks through Resumés, Cover Letters, and Interview Questions in the field you chose...</div>

    <div class="container-fluid">
        <div class="row">
          <div class="col-lg-1 col-md-1"></div>
          <div class="col-lg-3 col-md-3" style="text-align:center;">
                    <button class="tablinks" onclick="openTab(event, 'Resume')"><img class="resumeicon iconimage" src="/Users/mtaslagyan/Desktop/resumania/images/resumeicon.PNG"></button>
                  <label style="caption-style">Resume</label>
                </div>
                 <div class="col-lg-3 col-md-3" style="text-align:center;">
                    <button class="tablinks" onclick="openTab(event, 'CoverLetter')"><img class="coverlettericon iconimage" src="/Users/mtaslagyan/Desktop/resumania/images/coverlettericon.PNG"></button>
                    <label style="caption-style">Cover Letter</label>
                </div>
                <div class="col-lg-3 col-md-3" style="text-align:center;">
                   <button class="tablinks" onclick="openTab(event, 'Interview')"><img class="interviewicon iconimage" src="/Users/mtaslagyan/Desktop/resumania/images/interviewicon.PNG"></button>
                    <label style="caption-style">Interview Questions</label>
                </div>
    </div>
  </div>
</div>

只有这么多html，你应该用，现在，下面是css，非常小:

.hint{
    font-family: 'Coiny', Serif;
    font-size:40px;
    text-align:center;
    color:navy;
    padding-top:60px;
    margin:0px 150px 0px 150px;
}

.iconimage{
  width:250px;
  }

  .caption-style{
  font-family: 'Satisfy', cursive;
  font-size: 30px;
  color: dimgrey;
  text-align: center;
   }

一般情况下，你的文字样式需要使用style，因为bootstrap有自己的text/caption字体样式，你可以只用你的css来做文字字体样式。

同样对于图像，我认为我们不需要宽度，因为图像将在 3 部分中覆盖整个 100% 的宽度。如果图像没有覆盖 div 类“col-lg-3”中的整个宽度，则更愿意使用 width:100% 而不是 width:250px