CSS集中元素

时间：2019-02-01 22:33:19

标签： css flexbox css-position

所以我正在学习CSS图形，并试图在CSS中创建此图像：

enter image description here

我从flexbox开始尝试对我的物品进行布局，但是从那以后我就知道我无法将圈子放在中心。它也没有响应。我也没有尝试过将徽标居中。所有元素都必须保持其长宽比。

有人可以告诉我我要去哪里了吗？

一旦我也将图像居中，我想将橙色和蓝色框变成按钮。如果可能的话，我也非常感谢如何覆盖透明按钮。

我已将代码放在codepen和下面的代码段中。

*{
	color: #535252;
	font-family: --var(BB_font);
}

body {
	font-size: 15px;
	background-color: #c3c5c8;
}

.title{
	font-size: 5em
}

.image {
	background-repeat: no-repeat;
	background-position: center;
}

.orangeRectangle {
	width: 100%;
	height: auto;
	
	border-top-right-radius: 150px;
	border-bottom-right-radius: 150px;
	z-index: 0;

	background: #ec673e;
}

.blueRectangle {
	width: 100%;
	height: auto;

	border-top-left-radius: 150px;
	border-bottom-left-radius: 150px;
	z-index: 0;

	background: #67b9ce;
}

.rectangleTitle {
	text-align: center;
	font-size: 3em
}

.greyCircle {
	width: 40%;
	height: 40%;
	position: absolute;
	left: 30%;
	top: 25%;
	align-self: center;
	z-index: 5;
	background-color: #535252;
	border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head>
	<title>Landing Page</title>

	<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

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

	<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

	<link rel="stylesheet" type="text/css" href="BB1.css">
</head>
<body>



<div class="container pt-2">
	<div class="border border-dark d-flex flex-row justify-content-center">
		<h1 class="title">Header</h1>
	</div>
	<div class="border border-dark d-flex flex-row justify-content-center align-items-stretch" style="height: 950px">
		<div class="blueRectangle border-left border-bottom">
			<h2 class="rectangleTitle pt-2">Heading 1</h2>
		</div>
		<div class="orangeRectangle border-left border-bottom border-right">
			<h2 class="rectangleTitle pt-2">Heading 2</h2>
		</div>
		<div class="greyCircle"></div>
	</div>		
	<div class="border border-dark d-flex flex-row justify-content-center align-items-center" style="height: 150px">
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam cum iste voluptatibus reprehenderit in dolor veritatis non eveniet at. Suscipit molestiae maxime laboriosam! Ipsa praesentium consectetur ratione quo distinctio iure nulla explicabo quas consequatur, id deserunt ducimus labore error vitae omnis animi facilis harum debitis. Facere architecto impedit eaque excepturi dolorum optio nemo ab! Iusto, vel non veritatis dolorem debitis voluptatum provident omnis commodi perspiciatis velit distinctio! Deleniti, nam aliquid quidem repudiandae voluptates, excepturi aperiam nesciunt quo ad officia impedit. Ipsa eveniet culpa ullam odio amet ea cupiditate consectetur et? Illo, accusamus tempore. Dolor voluptas voluptatum asperiores esse illo eaque.</p>
	</div>
</div>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</body>
</html>

谢谢

2 个答案:

答案 0 :(得分：1)

在Flexbox中居中

使用flexbox，将内容居中的最简单技巧是将包含元素设置为display: flex;或display: inline-flex;，然后添加align-items: center;（这将使所有内容垂直居中）和{{1 }}（这是用于水平定心）。

赞：

justify-content: center
* {
  margin: 0;
  padding: 0;
}

.flex-container {
  border: 5px solid red;
  display: flex;
  height: calc(100vh - 10px);
  width: calc(100vw - 10px);
}

.center-everything {
  align-items: center;
  justify-content: center;
}

保持宽高比

关于保持宽高比，您将需要为每个元素定义<div class="flex-container center-everything"> <strong>center me!</strong> </div>和height。如果您需要此布局具有响应性（也就是在放大或缩小尺寸时保持所有纵横比），则可以使用relative units确保比例固定。

通过包装将元素制成锚点或按钮

将元素制作为按钮就像将其包装在width或<a></a>标签中一样容易，这些标签是内联标签，当用作包装时应保持布局。然后，您可以自定义这些链接/按钮需要执行使用<button></button>，href，或JavaScript事件侦听器（参见下面我演示）的行动。如果您要搜索任何一种在线资源，那么

重叠和onclick

关于覆盖，您可以通过将覆盖元素嵌套在容器中，然后使用position: absolute将嵌套元素放置在该容器上来轻松创建覆盖元素（这会将元素从z-plane中分离出来并将其定位相对于带有position: absolute的容器）。您可以将position: relative和height设置为100％，因为此嵌套元素现在相对于其width容器，因此这些设置将确保该元素覆盖整个包含的元素。然后，您可以使用position: relative和top: 0定位元素，这将确保元素与容器的两侧齐平。

一篇很好的文章：https://teamtreehouse.com/community/how-css-position-absolute-brings-the-overlay-element-to-the-front

在left: 0容器内使用position: absolute（带有一些有趣的切换动作来踢动），观看具有半透明颜色的多个叠加层的此演示：

position: relative
const overlayYellow = document.querySelector(".overlay.yellow");
const overlayBlue = document.querySelector(".overlay.blue");
const buttonYellow = document.querySelector(".btn.yellow");
const buttonBlue = document.querySelector(".btn.blue");

buttonYellow.addEventListener('click', () => {
  toggleOverlay('yellow');
});

buttonBlue.addEventListener('click', () => {
  toggleOverlay('blue');
});

function toggleOverlay(color) {
  const overlay = (color === 'yellow') ? overlayYellow : overlayBlue;
  
  if (overlay.classList.contains('hidden')) {
    overlay.classList.remove('hidden');
  } else {
    overlay.classList.add('hidden');
  }
}
* {
  margin: 0;
  padding: 0;
}

.container {
  background: red;
  height: 100vh;
  width: 100vw;
}

.overlay {
  display: block;
  height: calc(100% - 10px);
  left: 5px;
  opacity: 0.5;
  position: absolute;
  top: 5px;
  width: calc(100% - 10px);
  z-index: 1;
}

.overlay.yellow {
  background: yellow;
}

.overlay.blue {
  background: blue;
}

.overlay.hidden {
  display: none;
}

.btn {
  cursor: pointer;
  height: 36px;
  position: absolute;
  right: 12px;
  width: 180px;
  z-index: 2;
}

.btn.yellow {
  top: 12px;
}

.btn.blue {
  top: 60px;
}

答案 1 :(得分：0)

解决此问题的最佳方法是制作一个额外的div容器。在此容器中，您有背景和带有灰色背景的徽标作为一种叠加层。我已相应地更新了您的codepen。

.greyCircle {
    width: 40vh;
    height: 40vh;
    z-index: 5;
    background-color: #535252;
    border-radius: 50%;
}
.circle-container-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  top: 0;
}

.additional-outer-container {
  position: relative;
  height: 950px
}

我建议您看看How to Center in CSS和A Complete Guide to flexbox。在CSS中创建布局时，这两个站点是很棒的资源。

相关问题
最新问题