Question

这是有效的代码，实际上使文本在中间对齐：

TreeMap<CellAddress, XSSFComment>

但这是输出： 所需的输出应使用背景色填充整个左列。

我该如何实现？

编辑：不是How can I make Bootstrap columns all the same height?的重复项这是垂直对齐的问题

Answer 1

这可能会有所帮助。 ps：查看整页输出。使用此类align-items-center

<!Doctype html>
<html>
	<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
	</head>
<body>
<div class="container">
    <div class="row" style="border-radius: 4px; border: solid 1px #979797;">
        <div class="col-md-3 align-items-center" style="background-color: #4a90e2">
            <h1>Align</h1>
        </div>
		<div class="col-md-9"><ul>
		<li>content</li>
		<li>content</li>
			</ul></div>
    </div>
</div>
</body>
</html>

Answer 2

尝试一下：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-3 d-flex justify-content-center align-items-center" style="background-color: #4a90e2;">
      Align
  </div>
  <div class="col-md-9">
    <div class="p-2 bd-highlight">Flex item 1</div>
    <div class="p-2 bd-highlight">Flex item 2</div>
    <div class="p-2 bd-highlight">Flex item 3</div>
    <button type="button" class="btn btn-primary">Primary</button>
  </div>
</div>

Answer 3

“对齐”内容应位于内部div的内部，而不是使列本身居中。

<div class="container section-content">
    <div class="row" style="border-radius: 4px; border: solid 1px #979797;">
        <div class="col-md-3 d-flex flex-column" style="background-color: #4a90e2">
            <div class="my-auto">
            Align
            </div>
        </div>
        <div class="col">
            ...
        </div>
    </div>
</div>

https://www.codeply.com/go/fwlfC2eCh7

在Bootstrap 4.1中使col文本与背景颜色垂直居中对齐

3 个答案: