首页 > 解决方案 > 间距和对齐文本

问题描述

我想在两列之间添加空格

并对齐技能__副标题,技能__文本稍微居中到页面而不是居中到屏幕上方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>

标签: htmlcss

解决方案


将列的宽度减小到 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>

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


推荐阅读