文本间距和对齐方式

Question

我想在这两列之间加个空格

并将skills__subtitle，skills__text稍微居中对齐，而不是屏幕上方756px的第二列居中

以下是我的代码

​

    .row {
        display: flex;
      }
    
    .column {
        flex: 50%;
        margin: 10px;
    }

<div class="skills__container bd-grid">
  <div class="row">
    <div class="column">
      <h2>Column 1</h2>
      <p>Some text</p>
    </div>
    <div class="column">
      <h3>Column 2</h3>
    </div>
  <div>
</div>

​

Answer 1

将列的宽度减少到48%，在行中添加justify-content:space-between将增加空间。

​

    .row {
        display: flex;
        justify-content:space-between;

      }
    
    .column {
        flex: 48%;
        margin: 10px;
    }

<div class="skills__container bd-grid">
  <div class="row">
    <div class="column">
      <h2>Column 1</h2>
      <p>Some text</p>
    </div>
    <div class="column">
      <h3>Column 2</h3>
    </div>
  <div>
</div>

​

我真的不太明白你问题的第二部分，介意澄清一下吗？

Answer 2

试试这个，我知道你的问题，但是你给你的栏目留出边际，而不是你的栏目，好吧。

​

    .row {
        display: flex;
      }
    
    .column-box {
       
        margin-right: 10px;
    }

<div class="skills__container bd-grid">
  <div class="row">
    <div class="column">
     <class="column-box">
         <h2>Column 1</h2>
         <p>Some text</p>
      </div>
    </div>
    <div class="column">
      <class="column-box">
          <h3>Column 2</h3>
        </div>
    </div>
  <div>
</div>

​