CSS - 将文本与div对齐

问题描述 投票:2回答:1

我正在努力将文本与div对齐。

我目前有这个:

enter image description here

但我想实现这个目标(我刚刚编辑了截图,向您展示我的意思):

enter image description here

我的代码如下:

HTML

<div class="regionHeader">
    <div class="regionArrow"></div>
    <h2>Some long header that should be aligned to the left next to the div with arrow</h2>
</div>

CSS

.regionHeader {
    border-bottom: 1px solid #ffd800;
    cursor: pointer;
}

.regionArrow {
    border-right: 4px solid #ffd800;
    border-bottom: 4px solid #ffd800;
    width: 13px;
    height: 13px;
    transform: rotate(45deg);
    float: left;
    margin-top: 11px;
    margin-right: 13px;
    margin-bottom: 0px;
    margin-left: 3px;
}

h2 {
    font-family: changa-regular;
    font-size: 2em;
}

我已经玩过显示和浮动,但它要么不起作用,要么我做错了。

html css asp.net css3 alignment
1个回答
4
投票

您可以在标题上使用padding-left

.regionHeader {
  border-bottom: 1px solid #ffd800;
  cursor: pointer;
}

.regionArrow {
  border-right: 4px solid #ffd800;
  border-bottom: 4px solid #ffd800;
  width: 12px;
  height: 13px;
  transform: rotate(45deg);
  float: left;
  margin-top: 11px 13px 0 3px;
}

h2 {
  font-size: 2em;
  padding-left: 1.2em; /* <- added */
}
<div class="regionHeader">
  <div class="regionArrow"></div>
  <h2>Some long header that should be aligned to the left next to the div with arrow</h2>
</div>

或者使用flexbox方法并删除float

.regionHeader {
  border-bottom: 1px solid #ffd800;
  cursor: pointer;
  display: flex; /* <- added */
}

.regionArrow {
  border-right: 4px solid #ffd800;
  border-bottom: 4px solid #ffd800;
  width: 16px;
  height: 13px;
  transform: rotate(45deg);
  margin: 30px 15px;
}

h2 {
  font-family: changa-regular;
  font-size: 2em;
}
<div class="regionHeader">
  <div class="regionArrow"></div>
  <h2>Some long header that should be aligned to the left next to the div with arrow</h2>
</div>

Browser support for flexbox非常好。不要忘记添加适当的供应商前缀。

© www.soinside.com 2019 - 2024. All rights reserved.