时间戳

首页 > 解决方案 > CSS 集中元素

css - CSS 集中元素

问题描述

所以我正在学习 css 图形，我正在尝试在 css 中创建这个图像：

在此处输入图像描述

我已经开始使用 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>

谢谢

标签： cssflexboxcss-position

解决方案

在 Flexbox 中居中

使用 flexbox，使任何东西居中的最简单技巧是将包含元素设置为display: flex;ordisplay: inline-flex;然后添加align-items: center;（这将使所有内容垂直居中）和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和width。如果您需要此布局具有响应性（即在放大或缩小尺寸时保持所有纵横比），您可以使用相对单位来确保您的比例是固定的。

通过包装使元素成为锚点或按钮

将元素制作成按钮就像将其包装在<a></a>或<button></button>标签中一样简单，这些标签是内联标签，在用作包装器时应保持布局。href然后，您可以使用、onclick或 JavaScript 事件侦听器自定义这些链接/按钮执行的操作（请参阅下面的演示）。如果您搜索其中任何一个，在线资源就会过多。

叠加和position: absolute

关于叠加，您可以轻松地创建叠加元素，方法是将其嵌套在容器中，然后使用 将嵌套元素放置在该容器上position: absolute（这会将元素从z 平面中分离出来，并将其相对于容器定位position: relative）。您可以将heightand设置width为 100%，因为这个嵌套元素现在是相对于它的position: relative容器的，所以这些设置将确保元素覆盖整个包含元素。然后，您可以使用top: 0and定位元素left: 0，这将确保元素与其容器的两侧齐平。

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

请参阅此演示，使用多个半透明颜色叠加，使用容器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;
}
<div class="container">
  <div class="overlay yellow"></div>
  <div class="overlay blue"></div>
  <button class="btn yellow">Toggle yellow overlay!</button>
  <button class="btn blue">Toggle blue overlay!</button>
</div>

推荐阅读