javascript - 在 html/css 中居中两个元素
问题描述
我有以下代码:
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: grid;
gap: 100px;
grid-template-columns: repeat(2, 1fr);
width: 100%;
margin: 0 auto;
padding: 20px;
justify-content: center;
overflow: hidden;
}
.square {
position: relative;
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square1:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img{
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square1 .square-image1 img{
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details{
padding: 20px 30px 30px;
}
.square1 .square-details1{
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
.parent-div {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
@media screen and (max-width: 480px) {
.parent-div {
flex-direction: column;
}
}
@media screen and (max-width: 480px) {
.square{
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
@media screen and (max-width: 480px) {
.square .square-image img{
height: 230px !important;
border: 5px solid #555;
}
}
.square1 {
position: relative;
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (max-width: 480px) {
.square1{
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 54px;
}
}
@media screen and (max-width: 480px) {
.square1 .square-image1 img{
height: 230px !important;
border: 5px solid #555;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="containerE">
<div class="row1">
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div><a href="https://m-hussainomer03.medium.com/chances-of-my-uni-college-admission-20bc0efec0af" target="_" class="button56">Read More</a></div>
</div>
</div>
<div class="square1">
<div class="square-image1">
<img src="assets/img/Blog2.png">
</div>
<div class="square-details1">
<h3 class="h11">My Career Advice To You: Take These Steps...</h3>
<p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0>
<div><a href="https://m-hussainomer03.medium.com/my-career-advice-to-you-take-these-steps-to-ultimate-prosperity-6c0687ce9c9f" target="_" class="button56">Read More</a></div>
</div>
</div>
</div>
</div>
</div>
</section>
我面临的问题与保证金有关。所以当你运行上面的代码时,在一个新的页面上打开它,然后缩小到50%
或者缩小,然后你可以看到输出是这样的:
看看左边的博客卡是怎么一直向左移动的?这是某种保证金问题,我想解决这个问题。
预期产出
所以我希望对齐方式与我发送的预期输出图片一样。有没有办法设置width: 100%
和让博客卡对齐方式与上面的预期输出一样?因为我不希望宽度px
像你放大100%
页面时那样,所以博客卡的一半被切断,就像它没有根据页面宽度一样。
有什么建议么?
更新
对齐仍然不像我发送的预期输出。在预期的输出中,您可以看到第一个博客卡片的第一个角与第一个底部元素的第一个角匹配,第二个博客卡片的第二个角与第二个底部元素的第二个角匹配。参考预期的输出,这将是有道理的!谢谢!
解决方案
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: grid;
gap: 100px;
grid-template-columns: repeat(2, 1fr);
width: 100%;
margin: 0 auto;
padding: 20px;
justify-content: center;
overflow: hidden;
}
.square {
position: relative;
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square1:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img{
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square1 .square-image1 img{
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details{
padding: 20px 30px 30px;
}
.square1 .square-details1{
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
.parent-div {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
@media screen and (max-width: 480px) {
.parent-div {
flex-direction: column;
}
}
@media screen and (max-width: 480px) {
.square{
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
@media screen and (max-width: 480px) {
.square .square-image img{
height: 230px !important;
border: 5px solid #555;
}
}
.square1 {
position: relative;
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-right: auto;
}
@media screen and (max-width: 480px) {
.square1{
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 54px;
}
}
@media screen and (max-width: 480px) {
.square1 .square-image1 img{
height: 230px !important;
border: 5px solid #555;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="containerE">
<div class="row1">
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div><a href="https://m-hussainomer03.medium.com/chances-of-my-uni-college-admission-20bc0efec0af" target="_" class="button56">Read More</a></div>
</div>
</div>
<div class="square1">
<div class="square-image1">
<img src="assets/img/Blog2.png">
</div>
<div class="square-details1">
<h3 class="h11">My Career Advice To You: Take These Steps...</h3>
<p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0>
<div><a href="https://m-hussainomer03.medium.com/my-career-advice-to-you-take-these-steps-to-ultimate-prosperity-6c0687ce9c9f" target="_" class="button56">Read More</a></div>
</div>
</div>
</div>
</div>
</div>
</section>
使用上面的CSS,在square1中添加margin-left:auto和在square1中添加margin-right:auto,它会起作用
推荐阅读
- angular - Angular-Routing:使用redirectTo重定向到错误的路由
- r - 如何将 R6 类导入包中?
- paramiko - 如何在 paramiko 中使用 openssh 密钥
- node.js - 如何构建 node-webrtc 并支持 H264?
- react-native - react native Redux:即使我使用过 useDispatch 我仍然无法访问操作中的方法
- node.js - 哪些攻击可以使用空上下文绕过 Node.js VM?
- google-sheets - 如何组合来自两个谷歌工作表的数据并排除空行?
- javascript - _.orderBy 不在 Vue 中按列排序
- javascript - Firebase FieldValue.arrayUnion() 在客户端 SDK 上无法正常工作
- java - org.neo4j.driver.exceptions.ClientException:服务器不支持该驱动支持的任何协议版本