如何解决如何将2个Divs并排居中
我有2个<div>
,每个都有一个<h1>
和一个<button>
。我希望它们居中,但中间要留有间隔。我在互联网上搜寻了无数StackOverflow的问题,文章和教程,但它们似乎都不起作用,这是我的代码:https://jsfiddle.net/obznmdcr/16/
button {
text-align: center;
height: 75px;
width: 225px;
font-size: 30px;
border-radius: 40px;
overflow: hidden;
border: none;
position: relative;
box-shadow: 0px 4px 15px rgba(0,0.4);
cursor: pointer;
}
.panel-left {
background: rgba(0,0.2);
border-radius: 10px;
display: grid;
place-items: center;
float: left;
padding: 0px 30px 30px 20px;
vertical-align: middle;
}
.panel-left h2 {
font-family: Helvetica;
text-align: center;
padding-bottom: 5px;
margin-left: auto;
}
.panel-right {
background: rgba(0,0.2);
border-radius: 10px;
display: grid;
place-items: center;
float: left;
right: 500px;
padding: 10px 20px 30px 20px;
margin-left: 18%;
margin-right: auto;
vertical-align: middle;
}
.panel-right h2 {
font-family: Helvetica;
text-align: center;
padding-bottom: 25px;
}
.btn-left {
background: linear-gradient(90deg,#ff5e62,#ff9966);
}
.btn-left:hover {
background: linear-gradient(90deg,#ff9966,#ff5e62);
}
.btn-left:active {
background: linear-gradient(90deg,#d68359,#d36668);
}
.btn-right {
background: linear-gradient(90deg,#ff5e62);
}
.btn-right:hover {
background: linear-gradient(90deg,#ff9966);
}
.btn-right:active {
background: linear-gradient(90deg,#d36668,#d68359);
}
<div class="panel-left">
<h2>Title Left</h2>
<button class="btn-left" id="btn" type="button" onclick="console.log('button pressed');">Button Left</button>
</div>
<div class="panel-right">
<h2>Title Right</h2>
<button class="btn-right" id="btn" type="button" onclick="console.log('button pressed');">Button Right</button>
</div>
解决方法
该问题未指定divs
是否也必须垂直居中。
仅用于水平居中:
HTML:
在div
中扭曲HTML代码,此处带有类似.container
的类。
CSS:
将display
类的flex
设置为container
,并将其justify-content
属性设置为space-evenly
。
从margin-left
中删除margin-right
和.panel-right
。
.container{
display: flex;
justify-content: space-evenly;
}
button {
text-align: center;
height: 75px;
width: 225px;
font-size: 30px;
border-radius: 40px;
overflow: hidden;
border: none;
position: relative;
box-shadow: 0px 4px 15px rgba(0,0.4);
cursor: pointer;
}
.panel-left {
background: rgba(0,0.2);
border-radius: 10px;
display: grid;
place-items: center;
float: left;
padding: 0px 30px 30px 20px;
vertical-align: middle;
}
.panel-left h2 {
font-family: Helvetica;
text-align: center;
padding-bottom: 5px;
margin-left: auto;
}
.panel-right {
background: rgba(0,0.2);
border-radius: 10px;
display: grid;
place-items: center;
float: left;
right: 500px;
padding: 10px 20px 30px 20px;
/*margin-left: 18%;
margin-right: auto;*/
vertical-align: middle;
}
.panel-right h2 {
font-family: Helvetica;
text-align: center;
padding-bottom: 25px;
}
.btn-left {
background: linear-gradient(90deg,#ff5e62,#ff9966);
}
.btn-left:hover {
background: linear-gradient(90deg,#ff9966,#ff5e62);
}
.btn-left:active {
background: linear-gradient(90deg,#d68359,#d36668);
}
.btn-right {
background: linear-gradient(90deg,#ff5e62);
}
.btn-right:hover {
background: linear-gradient(90deg,#ff9966);
}
.btn-right:active {
background: linear-gradient(90deg,#d36668,#d68359);
}
<div class="container">
<div class="panel-left">
<h2>Title Left</h2>
<button class="btn-left" id="btn" type="button" onclick="console.log('button pressed');">Button Left</button>
</div>
<div class="panel-right">
<h2>Title Right</h2>
<button class="btn-right" id="btn" type="button" onclick="console.log('button pressed');">Button Right</button>
</div>
</div>
也可用于垂直居中:
如果您希望它们也垂直居中,请将html
,body
,.container
的高度设置为100%
(或根据需要设置其他尺寸) ,然后在align-items
类中将center
属性设置为container
。
您的CSS中有float: left;
用于已删除的右侧面板。
我还为左右面板设置了右边距和左边距。
button {
text-align: center;
height: 75px;
width: 225px;
font-size: 30px;
border-radius: 40px;
overflow: hidden;
border: none;
position: relative;
box-shadow: 0px 4px 15px rgba(0,0.4);
cursor: pointer;
}
.panel-left {
margin-right: 20px;
background: rgba(0,0.2);
border-radius: 10px;
float: left;
padding: 0px 30px 30px 20px;
vertical-align: middle;
}
.panel-left h2 {
font-family: Helvetica;
text-align: center;
padding-bottom: 5px;
margin-left: auto;
}
.panel-right {
margin-left: 20px;
background: rgba(0,0.2);
border-radius: 10px;
display: grid;
place-items: center;
right: 500px;
padding: 10px 20px 30px 20px;
margin-left: 18%;
margin-right: auto;
vertical-align: middle;
}
.panel-right h2 {
font-family: Helvetica;
text-align: center;
padding-bottom: 25px;
}
.btn-left {
background: linear-gradient(90deg,#ff9966);
}
.btn-left:hover {
background: linear-gradient(90deg,#ff5e62);
}
.btn-left:active {
background: linear-gradient(90deg,#d36668);
}
.btn-right {
background: linear-gradient(90deg,#ff5e62);
}
.btn-right:hover {
background: linear-gradient(90deg,#ff9966);
}
.btn-right:active {
background: linear-gradient(90deg,#d68359);
}
<div class="panel-left">
<h2>Title Left</h2>
<button class="btn-left" id="btn" type="button" onclick="console.log('button pressed');">Button Left</button>
</div>
<div class="panel-right">
<h2>Title Right</h2>
<button class="btn-right" id="btn" type="button" onclick="console.log('button pressed');">Button Right</button>
</div>
,
将按钮和<h2>
放入div并使用flex。
尝试一下:
.parent {
display: flex;
align-items: center;
justify-content: space-between;
// justify-content: space-evenly;
}
<div class="parent">
<div class="panel-left">
<h2>Title Left</h2>
<button class="btn-left" id="btn" type="button" onclick="console.log('button
pressed');">Button Left</button>
</div>
<div class="spacer">
</div>
<div class="panel-right">
<h2>Title Right</h2>
<button class="btn-right" id="btn" type="button" onclick="console.log('button
pressed');">Button Right</button>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。