尽管字符宽度保持网格对齐

时间：2018-05-02 14:43:02

标签： html css

我在<section>标记内有一个CSS网格。尽管角色的宽度，我还是需要以某种方式对齐一系列<h3>标签。请参阅以下示例：

＆＃13;
＆＃13; 
.letter-grid__authors-titles {
  display: flex;
}

.filter-item-grid {
  display: grid;
  display: -ms-grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-content: center;
}

.letter-grid__filter-item {
  display: grid;
  display: -ms-grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  margin-left: 24px;
}

.alphabet {
  align-self: center;
  font-family: sans-serif;
  font-size: 73px;
  text-transform: uppercase;
  color: #484848;
}
＆＃13; 
<section class="letter-grid__authors-titles">
  <span class="alphabet">e</span>
  <div class="filter-item-grid">
    <div class="letter-grid__filter-item">
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
    </div>
  </div>
</section>
<section class="letter-grid__authors-titles">
  <span class="alphabet">j</span>
  <div class="filter-item-grid">
    <div class="letter-grid__filter-item">
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
    </div>
  </div>
</section>
<section class="letter-grid__authors-titles">
  <span class="alphabet">k</span>
  <div class="filter-item-grid">
    <div class="letter-grid__filter-item">
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
    </div>
  </div>
</section>
<section class="letter-grid__authors-titles">
  <span class="alphabet">w</span>
  <div class="filter-item-grid">
    <div class="letter-grid__filter-item">
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
    </div>
  </div>
</section>
＆＃13;
＆＃13;
＆＃13;

您会看到所有＆＃34;标题＆＃34;没有垂直对齐，因为字符的宽度略有不同。我尝试添加一个边距，同时玩文本居中，但我不完全确定这是怎么回事。

我如何才能最好地将标题相互对齐？

4 个答案:

答案 0 :(得分：1)

添加最小宽度的最小宽度：

.alphabet {
  min-width: 100px;
}

我在这个例子中使用了100px，只需用最宽字符的实际宽度（通常为W）替换它。

＆＃13;
＆＃13; 
.letter-grid__authors-titles {
  display: flex;
}

.filter-item-grid {
  display: grid;
  display: -ms-grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-content: center;
}

.letter-grid__filter-item {
  display: grid;
  display: -ms-grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  margin-left: 24px;
}

.alphabet {
  align-self: center;
  font-family: sans-serif;
  font-size: 73px;
  text-transform: uppercase;
  color: #484848;
  min-width: 100px;
}
＆＃13; 
<section class="letter-grid__authors-titles">
  <span class="alphabet">e</span>
  <div class="filter-item-grid">
    <div class="letter-grid__filter-item">
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
    </div>
  </div>
</section>
<section class="letter-grid__authors-titles">
  <span class="alphabet">j</span>
  <div class="filter-item-grid">
    <div class="letter-grid__filter-item">
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
    </div>
  </div>
</section>
<section class="letter-grid__authors-titles">
  <span class="alphabet">k</span>
  <div class="filter-item-grid">
    <div class="letter-grid__filter-item">
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
    </div>
  </div>
</section>
<section class="letter-grid__authors-titles">
  <span class="alphabet">w</span>
  <div class="filter-item-grid">
    <div class="letter-grid__filter-item">
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
    </div>
  </div>
</section>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

在您的代码中添加：

ControlPaint.DrawBorder(e.Graphics, lblOffset.ClientRectangle,
    Color.Gray, 1, ButtonBorderStyle.Solid,
    Color.Gray, 1, ButtonBorderStyle.Solid,
    Color.Gray, 1, ButtonBorderStyle.Solid,
    Color.Gray, 1, ButtonBorderStyle.Solid);

答案 2 :(得分：0)

一种解决方案可能是指定.alphabet div的默认宽度。

这样，无论你输出什么字母，你的元素都会占用相同的空间。

我在这里放width: 10rem;所以你可以看到。

如果您需要更通用的内容，可能需要重新排列元素并使用类似display: contents的内容。你可以查看这个很酷的教程：https://css-tricks.com/get-ready-for-display-contents/ 

.letter-grid__authors-titles {
  display: flex;
}

.filter-item-grid {
  display: grid;
  display: -ms-grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-content: center;
}

.letter-grid__filter-item {
  display: grid;
  display: -ms-grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  margin-left: 24px;
}

.alphabet {
  align-self: center;
  font-family: sans-serif;
  font-size: 73px;
  width: 10rem;
  text-transform: uppercase;
  color: #484848;
}
<section class="letter-grid__authors-titles">
  <span class="alphabet">e</span>
  <div class="filter-item-grid">
    <div class="letter-grid__filter-item">
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
    </div>
  </div>
</section>
<section class="letter-grid__authors-titles">
  <span class="alphabet">j</span>
  <div class="filter-item-grid">
    <div class="letter-grid__filter-item">
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
    </div>
  </div>
</section>
<section class="letter-grid__authors-titles">
  <span class="alphabet">k</span>
  <div class="filter-item-grid">
    <div class="letter-grid__filter-item">
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
    </div>
  </div>
</section>
<section class="letter-grid__authors-titles">
  <span class="alphabet">w</span>
  <div class="filter-item-grid">
    <div class="letter-grid__filter-item">
      <h3 class="letter-grid__filter-title">
        <a href="#">Title</a>
      </h3>
    </div>
  </div>
</section>

答案 3 :(得分：0)

您可以使用表格显示（table，table-row，table-cell），如下所示：

＆＃13;
＆＃13; 
.main {
  display: table;
}

.main section {
  display: table-row;
}

.main section div {
  display: table-cell;
}
＆＃13; 
<div class="main">
  <section>
    <div class="letter">
      <h1>AAA</h1>
    </div>
    <div class="titles">
      <ul>
        <li>Title 1</li>
        <li>Title 2</li>
        <li>Title 3</li>
      </ul>
    </div>
  </section>

  <section>
    <div class="letter">
      <h1>BBBBBBBBBBBBB</h1>
    </div>
    <div class="titles">
      <ul>
        <li>Title 1</li>
        <li>Title 2</li>
        <li>Title 3</li>
      </ul>
    </div>
  </section>
</div>
＆＃13;
＆＃13;
＆＃13;

JS小提琴：https://jsfiddle.net/bocanegra_carlos/0yowhxmy/

相关问题
最新问题