Question

我有这个HTML / CSS片段：

＆＃13;

.matrix-right-letter-container {
	font-size: 48px;
}


.matrix-place {
	display: inline-block;
	vertical-align: top;
	margin: 10px;
}

.matrix-input {
	height: 50px;
	width: 50px;
	margin: 3px;
	vertical-align: bottom;
}

＆＃13;

<div class="matrix-line-container">
  <div id="matrix-c-place" class="matrix-place bracketed">
    CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
  </div>
  <div id="matrix-a-place" class="matrix-place bracketed">
    CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
  </div>
  <span class="matrix-right-letter-container">A</span>
</div>

＆＃13;

我需要在matrix-line-container中垂直居中字母 A 。但是将vertical-align: middle添加到.matrix-right-letter-container并没有帮助。我该怎么办？

Answer 1

至少有两种方法可以做到这一点。当然是CSS方式或使用一些JS。

选项1：CSS

现在，您可以为范围文本的父容器指定display:table属性，并且您要垂直对齐的元素为display:table-cell属性，并将其对齐顶部，中间底部等。

此处的代码段：

＆＃13;

.matrix-line-container {
  background: grey;
  display: table;  /* See what I did here? */
}
.matrix-right-letter-container {
  font-size: 48px;
  background: cyan;
  display: table-cell;  /* And also here*/
  vertical-align: middle;  /* And here*/
}
.matrix-place {
  display: inline-block;
  vertical-align: top;
  margin: 10px;
  background: pink;
}
.matrix-input {
  height: 50px;
  width: 50px;
  margin: 3px;
  vertical-align: bottom;
}

＆＃13;

<div class="matrix-line-container">
  <div id="matrix-c-place" class="matrix-place bracketed">CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>
  </div>
  <div id="matrix-a-place" class="matrix-place bracketed">CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>
  </div> <span class="matrix-right-letter-container">A</span>

</div>

＆＃13;

现在是第二个选项，

选项2：一些JS （不是真的推荐，但如果你想得到它的想法那么，我猜）

在这个选项中你只想找到父div元素高度的高度（我使用过jQuery，因为我喜欢它，就是这样，让我的输入更容易。现在你只有{{{ 1}}或height()或innerHeight()。根据用户的具体情况，随意使用它。获得父div元素的高度后，只需将该高度应用于outerHeight()元素作为span属性和Voila！你有它！

现在是第二个时髦选项的代码片段，

＆＃13;

line-height

＆＃13;

// Obviously I added some script - What else did you think I was gonna do?!!

var divht = $('.matrix-line-container').innerHeight() + 'px'; /* DO NOT forget to add that little 'px' to the end or else it wont work! */
$('.matrix-right-letter-container').css("line-height", divht);

＆＃13;

.matrix-line-container {
  background: grey;
}
.matrix-right-letter-container {
  font-size: 48px;
  background: cyan;
}
.matrix-place {
  display: inline-block;
  vertical-align: top;
  margin: 10px;
  background: pink;
}
.matrix-input {
  height: 50px;
  width: 50px;
  margin: 3px;
  vertical-align: bottom;
}

＆＃13;

希望这给了你一些思考的东西;）

希望这会有所帮助，快乐编码

Answer 2

您应该vertical-align: middle所有内联块，以便将它们相对于彼此垂直对齐

.matrix-right-letter-container {
	font-size: 48px;
}


.matrix-place {
	display: inline-block;
	vertical-align: middle;
	margin: 10px;
}

.matrix-input {
	height: 50px;
	width: 50px;
	margin: 3px;
	vertical-align: bottom;
}

<div class="matrix-line-container">
  <div id="matrix-c-place" class="matrix-place bracketed">
    CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
  </div>
  <div id="matrix-a-place" class="matrix-place bracketed">
    CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
  </div>
  <span class="matrix-right-letter-container">A</span>
</div>

DIV中的垂直居中文本

2 个答案: