CSS网格中居中的Div

问题描述 投票：0回答：1

我有一个2 x 2 CSS网格。每个网格框都有一个圆形按钮。所需的用户界面类似于：enter image description here相反，我的UI处于令人沮丧的状态，如下所示：enter image description here我怀疑主要原因是transform: translateY(k%);，我曾经在代码编辑器中四处移动按钮，但是它们似乎反应不灵敏。如何解决此错误？我已经尝试过使用flexbox将解决方案容纳在Centering CSS Grid，但无济于事。以下是相关代码：

.container{
    display: grid;
    grid-gap: 20px;
    height: 97vh;
  width: 97vw;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
        "blockOne blockTwo"
        "blockThree blockFour"

}

.item{
    background-color: whitesmoke;
    border: 0px solid black;
    box-shadow: 5px 5px;
}

.block1{
    grid-area: blockOne;
}

.block2{
    grid-area: blockTwo;
    height: 100%;
}

.block3{
    grid-area: blockThree;
    height: 100%;
}

.block4{
    grid-area: blockFour;
    height: 100%;
}

.item:hover{
    background-color: lightblue;
    transition: ease 0.3s; 
}

*{
    transition: ease 0.3s; 
}

.call{
    background-color: black;
    width: 250px;
    height: 250px;
    border-radius: 150px;
    margin: 0 auto;
    position: relative;
  top: 50%;
    transform: translateY(30%);
    box-shadow: 5px 5px;
    background-image: url("https://www.levelaccess.com/wp-content/uploads/2017/11/CVAA-02.png");
    background-position: center;
    background-size: 230px;
transition: 0.70s ease;
}

.call:hover{
    transition: 0.70s ease;
    background-color: whitesmoke;
}

.info{
    background-image: white;
    width: 250px;
    height: 250px;
    border-radius: 150px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 5px 5px;
    background-image: url("https://s3.us-east-2.amazonaws.com/upload-icon/uploads/icons/png/5851494071557740370-512.png");
    background-size: cover;
    background-position: center;
    background-size: 100px;
    text-align: center;
      display: flex;
  justify-content: center;
  align-items: center;
}

.info:hover{
    background-size: 300px;
}

.rehab{
    background-color: red;
    width: 250px;
    height: 250px;
    border-radius: 150px;
    margin: 0 auto;
    position: relative;
  top: 50%;
  transform: translateY(-50%);
    box-shadow: 5px 5px;
    background-image: url("data:image/=");
    background-position: center;
    background-size: contain;
    background-size: 50px;
}

.rehab:hover{
        background-size: 100%;
}

.CPR{
    background-color: red;
    width: 250px;
    height: 250px;
    border-radius: 150px;
    margin: 0 auto;
    position: relative;
  top: 50%;
  transform: translateY(-50%);
    box-shadow: 5px 5px;
    background-image: url("https://www.humankind.org/wp-content/uploads/2018/08/ems-icon-doing-cpr-300x300.png");
    background-size: cover;
transition: 0.3s ease-in-out;
}

.CPR:hover{
    background-image:url("https://thumbs.gfycat.com/AdmiredGorgeousHousefly-size_restricted.gif");
        background-size: contain;
background-position: 5px 45px;
    transition: 0.3s ease-in-out;

}

网站本身位于refath.github.io/I-Care。任何帮助是极大的赞赏。谢谢。

css grid center
1个回答
0
投票

您的HTML代码中几乎没有错误。 DIV没有正确关闭。

.container{
	display: grid;
	grid-gap: 20px;
	height: 97vh;
  width: 97vw;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas: 
		"blockOne blockTwo"
		"blockThree blockFour"

}

.item{
	background-color: whitesmoke;
	border: 0px solid black;
	box-shadow: 5px 5px;
  position:relative;padding:50px 0px 0px 0px;
}

.block1{
	grid-area: blockOne;
  	height: 100%;
}

.block2{
	grid-area: blockTwo;
	height: 100%;
}

.block3{
	grid-area: blockThree;
	height: 100%;
}

.block4{
	grid-area: blockFour;
	height: 100%;
}

.item:hover{
	background-color: lightblue;
	transition: ease 0.3s; 
}

*{
	transition: ease 0.3s; 
}

.call{
	background-color: black;
	width: 250px;
	height: 250px;
	border-radius: 150px;
	margin: 0 auto;
  top: 50%;
	box-shadow: 5px 5px;
	background-image: url("https://www.levelaccess.com/wp-content/uploads/2017/11/CVAA-02.png");
	background-position: center;
	background-size: 230px;
transition: 0.70s ease;
}

.call:hover{
	transition: 0.70s ease;
	background-color: whitesmoke;
}

.info{
	background-image: white;
	width: 250px;
	height: 250px;
	border-radius: 150px;
	margin: 0 auto;
	top: 50%;
	box-shadow: 5px 5px;
	background-image: url("https://s3.us-east-2.amazonaws.com/upload-icon/uploads/icons/png/5851494071557740370-512.png");
	background-size: cover;
	background-position: center;
	background-size: 100px;
	text-align: center;
	  display: flex;
  justify-content: center;
  align-items: center;
}

.info:hover{
	background-size: 300px;
}

.rehab{
	background-color: red;
	width: 250px;
	height: 250px;
	border-radius: 150px;
	margin: 0 auto;
  top: 50%;
	box-shadow: 5px 5px;
	background-image: url("data:image/png;base64,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");
	background-position: center;
	background-size: contain;
	background-size: 50px;
}

.rehab:hover{
		background-size: 100%;
}

.CPR{
	background-color: red;
	width: 250px;
	height: 250px;
	border-radius: 150px;
	margin: 0 auto;
  top: 50%;
	box-shadow: 5px 5px;
	background-image: url("https://www.humankind.org/wp-content/uploads/2018/08/ems-icon-doing-cpr-300x300.png");
	background-size: cover;
transition: 0.3s ease-in-out;
}

.CPR:hover{
	background-image:url("https://thumbs.gfycat.com/AdmiredGorgeousHousefly-size_restricted.gif");
		background-size: contain;
background-position: 5px 45px;
	transition: 0.3s ease-in-out;
	
}
<body data-gr-c-s-loaded="true"><div class="container">
	<div class="item block1">
		<a href="https://hangouts.google.com/webchat/start"><div class="call">
			
		</div></a>
	</div>
  <div class="item block2">
	<a href="https://cdpn.io/Refath/debug/dyoPmow/YvAgOeRgYVOA">
		<div class="info">
			
		</div>
	</a>
  </div>
  <div class="item block3">
	<a href="https://cdpn.io/Refath/debug/VwLYBjR/mVMbGDRgQKgr"><div class="item block3">
		<div class="rehab">
			
		</div>
	</div></a>
  </div>
  <div class="item block4">
	<a href="https://cdpn.io/Refath/debug/mdJyOpa/PNAvYKZKoNpr"><div class="item block4">
		<div class="CPR">
			
		</div>
	</div></a>
</div>
</body>

我已经编辑了您的代码以实现您想要的样子。

https://jsfiddle.net/rajeevRF/nz1upcx8/5/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.