代码之家 › 专栏 › 技术社区 › Kacper Stachowski

CSS-将文本与div对齐

alignment css3 asp.net css html

Kacper Stachowski · 技术社区 · 6 年前

我现在有:

但我想做到这一点(我刚刚编辑了一个屏幕截图,向您展示我的意思):

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;
}

1 回复 | 直到 6 年前

andreas 6 年前

你可以简单地使用 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>

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”>
<h2>某些长标题应与div旁边的左侧箭头对齐</h2>
</div>

Browser support for flexbox

推荐文章

Riddhi · 在ionic中对齐按钮

6 年前

Joshua Sparkel · 排列的元素相差几个像素

6 年前

ProtectedVoid · CSS宽度自动和向左浮动-允许溢出

6 年前

Josh Rodgers · 居中网格项目

6 年前

Jean Jacquemier · Apache箭头、对齐和填充

6 年前

Zubair · 与UILabel绘图/显示在屏幕上相关的方法

7 年前

user7055375 · 除了“文本对齐:居中把东西放在一个DIV里?

7 年前

KevinM · 在导航栏引导程序4中将图标与文本对齐

7 年前

KhiladiBhaiyya · 如何将引导程序导航栏最左边的项移到更远的左边

7 年前

Sujal · UIAlertController中的居中对齐图像操作

7 年前