gpt4 book ai didi

html - 使用 Bootstrap 3 将 div 居中,放入另一个 div

转载 作者:太空宇宙 更新时间:2023-11-04 09:26:51 25 4
gpt4 key购买 nike

我想将两个 div 居中放置到另一个 div 中(水平)。有人可以在下面的代码中告诉我该怎么做吗?我想要两个类为 box-left 和 box-right 的 div,在类为 outer 的 div 中间:

<html>
<head>
<style>
.container{
background-color: blue;
}
.outer{
text-align: center;
}
.width-600{
width:600px;
text-align:left;
margin-right: auto;
margin-left: auto;
}
.box-left{
background-color: yellow;
}
.box-right{
background-color: green;
}
</style>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="outer">
<div class="row width-600">
<div class="col-xs-12 col-md-4">
<div class="box-left">left</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="box-right">right</div>
</div>
</div>
</div>
</div>
</body> </html>

最佳答案

您可以在 .outer 类上使用 display:flex 和 justify-content:center ,将两行居中

检查下面的片段

.container {
background-color: blue;
}
.outer {
display:flex;
justify-content:center;
}
.width-600 {
width: 400px;


}
.box-left {
background-color: yellow;
}
.box-right {
background-color: green;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="container">
<div class="outer">
<div class="row ">
<div class="col-xs-12 col-md-4">
<div class="box-left">left</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="box-right">right</div>
</div>
</div>
</div>
</div>

关于html - 使用 Bootstrap 3 将 div 居中,放入另一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41027078/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com