在Bootstrap 4.1中使col文本与背景颜色垂直居中对齐
[英]Vertically center-align col text with background color in bootstrap 4.1
问题描述
this is the code that works actually aligns the text in the middle: 
这是有效的代码，实际上使文本在中间对齐：
<div class="container section-content">
<div class="row" style="border-radius: 4px; border: solid 1px #979797;">
<div class="col-md-3 align-self-center" style="background-color: #4a90e2">
Align
</div>
</div>
</div>
but this is the output: 但这是输出： the desired output should fill the whole left column with the background color.
所需的输出应使用背景色填充整个左列。
how do i achieve this? 我该如何实现？
edit: not a duplicate of How can I make Bootstrap columns all the same height? 编辑：不是重复的如何使Bootstrap列都具有相同的高度？ this is an issue with vertical alignment 这是垂直对齐的问题
3 个解决方案
解决方案1
1 2018-07-28 05:21:12
This might help. 这可能会有所帮助。 ps: see full page output. ps：查看整页输出。 Use this class align-items-center 使用此类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>
解决方案2
1 已采纳 2018-07-28 05:21:43
Try this: 尝试这个：
<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>
解决方案3
1 2018-07-28 11:31:06
The "align" content should be inside an inner div that's centered, instead of centering the column itself. “对齐”内容应位于居中的内部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 https://www.codeply.com/go/fwlfC2eCh7
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.