此问题在此处已有答案:
Bootstrap Center Vertical and Horizontal Alignment(18个答案)
Vertical Align Center in Bootstrap 4 [duplicate](20个答案)
昨天就关门了。
我试着用一张图片在上面进行集中输入。我是按照 * 职位文档 * 来做的,但是不知何故,图片没有水平地集中:
的数据
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>Title</title>
<!-- Css -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container position-absolute top-50 start-50 translate-middle">
<embed class="logo" src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo">
<form action="/streams" method="POST">
<div class="input-group">
<input class="form-control border-danger border-5" type="text" aria-describedby="start-button">
<button class="btn btn-danger" type="submit" id="start-button">Click</button>
</div>
</form>
</div>
</body>
</html>
字符串
我试过手动和使用display flex来完成,但没有成功。
2条答案
按热度按时间bvjveswy1#
至少有两种方法可以做到这一点:
text-center
<embed>
的父类上使用引导类d-flex justify-content-center
请参阅下面的片段。
字符串
gopyfrb32#
使用
text-center
link字符串