Question

我是bootstrap和jquery的新手，并为我的学校开展一个小项目。我在我的应用程序中使用bootstrap，以便它可以响应。您在attached image中可以看到的问题是，两个按钮垂直显示在各自列的顶部。如何排列这两个按钮，使它们显示在各自列的中间。以下是我的代码

＆＃13;

	<div class="container">
		<div class="row">
			<section class="col-sm-5">
				<div class="form-group">
					<label for="project-name">Enter Data:</label>
					<textarea class="form-control" rows="3" id="textarea1"
						name="input1"></textarea>
					<div class="error" id="javaerror"></div>
				</div>
			</section>
			<section class="col-sm-2 text-center">
				<div class="vcenter">
					<button type="button" class="btn btn-default" id="data1">Process1</button>
				</div>
			</section>
			<section class="col-sm-5">
				<div>
					<label for="project-name">Result</label>
					<textarea class="form-control" rows="3" id="result1"
						name="resultdata"></textarea>
				</div>
			</section>
		</div>

		<div class="row">
			<section class="col-sm-5">
				<div class="form-group">
					<label for="project-name">Enter Data:</label>
					<textarea class="form-control" rows="3" id="textarea2"
						name="input2"></textarea>
					<div class="error" id="openerror"></div>
				</div>
			</section>
			<section class="col-sm-2 text-center">
				<div class="vcenter">
					<button type="button" class="btn btn-default" id="data2">Process2
						</button>
				</div>
			</section>
			<section class="col-sm-5">
				<div>
					<label for="project-name">Result</label>
					<textarea class="form-control" rows="3" id="result2"
						name="resultDataNew"></textarea>
				</div>
			</section>
		</div>
	</div>

＆＃13;

＆＃13; 我的要求是按钮（Process1，Process2）应该出现在中间，如image

所示

Answer 1

您可以使用Bootsraps'4垂直对齐https://getbootstrap.com/docs/4.0/utilities/flex/#align-items

Answer 2

你可以做一件事，

您可以在<style>之前插入<body>，这应该是

    button.center{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

然后，要在中心插入任何按钮，您应该写<button type="button" class="center">Button</button>并插入普通按钮删除中心课。

如何使用bootstrap使按钮出现在中心

2 个答案: