个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
在我的标题中，我想在屏幕中央有一个圆圈，在左边有一个 h 1 标签，上面写着我的名字，并随着它缩放。我正在尝试将 flexbox 与它一起使用，但如果我尝试使用 justify-self: center ，我找不到使圆居中的方法，但它不起作用，我不知道我是什么做错了。
我尝试使用 margin: auto，但如果我尝试使用它，则它不会使我的个人资料图片居中，因为类名挡住了边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/home.css" rel="stylesheet">
<title>Portofolio</title>
</head>
<body>
<div class="header">
<div class="name">
<h1 class="name">Roel <span id="break"> Voordendag </span></h1>
</div>
<div class="profile-picture">
</div>
</div>
<div class="about">
<span class="about-text">
<p>
</p>
</span>
</div>
</body>
</html>
SCSS
.header{
width: 100%;
display: flex;
@include breakpoint(flex){
flex-direction: column-reverse;
}
}
.header .profile-picture{
width:35%;
border-radius:50%;
padding-bottom:35%;
border-style: solid;
border-width: thin;
border-color: $primary-color;
background-repeat: no-repeat;
background-size: cover;
background-image: url('https://www.istockphoto.com/photos/businessman');
position: relative;
align-self: center;
@include breakpoint(medium){
width: 320px;
height: 320px;
padding-bottom: 0;
justify-self: center;
}
}
.header .name{
color: $primary-color;
font-family: $primary-font;
font-size: 4vw;
text-align: center;
@include breakpoint(medium){
justify-self: flex-start;
align-self: center;
text-align: left;
}
h1{
margin: 0;
padding: 0;
}
}
#break{
@include breakpoint(medium){
display:block;
}
}
断点
@mixin breakpoint($point) {
//laptops to big screens
@if $point == xlarge {
@media (min-width: 1140px) { @content ; }
}
//tablet in horizontal mode
@else if $point == large {
@media (min-width: 992px) { @content ; }
}
//tablet vertical/big phones
@else if $point == medium{
@media (min-width: 786px) { @content ; }
}
//phones
@else if $point == small {
@media (min-width: 360px) { @content ; }
}
@else if $point == flex {
@media (max-width: 786px) { @content ; }
}
}
Breakpoint flex 是我想使用 flexbox 的起点
最佳答案
justify-self 不适用于 flex 元素。
在这种情况下，使用 row 方向并且因为您只想定位 flex 容器的一个元素，请使用自动边距并将 justify-self:center 替换为 左边距:自动；右边距:自动；
如果要居中的元素没有任何默认的上/下边距，也可以使用简写 margin: 0 auto。
此外，这里还有几篇文章，介绍了如何对齐 flex 元素:
关于html - Circle Div 不以 flexbox 为中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49245186/
24
4
0
我把圆圈旋转了180度，我怎样才能让内圈粘在上面(不旋转它) 最佳答案 试试这个代码。我创建了我的 HTML 代码。您的类(class)只需更改即可。 CSS: .outer-circle{
我正在制作一个圆圈到圆圈的碰撞检测程序。我可以让球四处移动，但是当检测到碰撞时，球重叠得很远。有什么建议么？提前致谢! import javax.swing.*; import java.awt.*;
这是圆类: public class Circle { private double radius; private double x; private double y; }
我正在制作一个 HTML Canvas 演示，以了解有关圆到圆碰撞检测和响应的更多信息。我相信检测代码是正确的，但响应数学并不完全正确。 该演示是使用 TypeScript 实现的，它是 JavaSc
所以我想在 CSS 中找出一个反圆/切出的圆。目前我找到 this answer 由 ScottS . 他的代码非常适合我，现在我正在寻找相同的效果，但在 的另一边元素。因此，我需要在右侧切出而不是
我目前正尝试在 C++ 中创建一个 Circle 类，但是当我编译时，我收到一条错误消息，提示“重载的‘Circle’调用不明确。我是 C++ 的新手，不确定这意味着什么。我一直在使用在这里可以找到一
在我的 wip 游戏中，我必须实现 Circle-Circle 碰撞。为了实现这一点，我只需计算它们的中心 (x1-x2)² + (y1-y2)² 之间的平方距离。如果它小于它们的平方半径 (r1+r
我必须画一个倒数计时器圆圈，我正在使用 this open source图书馆。要求是圆圈充满绿色并在 x 秒内消失。我已经给回圆圈绿色并在其上画了一个白色圆圈，绿色圆圈看起来正在消失。 self.c
我有一个 UIView，我将其背景设为圆形: self.colourView.layer.cornerRadius = 350 self.colourView.clipsToBounds = tr
引用: http://tympanus.net/Development/IconHoverEffects/#set-7 当您滑过上面链接中的任何圆圈图标时，它会以曲线形式淡化(我相信这是弹出的圆圈后面
我想创建一个形状，我将其描述为“反圆”: 图片有点不准确，因为黑线应该沿着 div 元素的外边界继续。 这是我目前拥有的演示:http://jsfiddle.net/n9fTF/ 没有图像的 CSS
我可以将文本添加到我的草图中，但如果我可以将文本直接附加到圆圈上，我会希望它。这意味着如果一个圆圈被另一个圆圈覆盖，文本也会被覆盖。在更高的层面上不是，我发现 d3 模型很难以某种方式构造对象，使它们
我正在展示用 Python 的 Turtle 模块绘制的孙子图案，他要求看同心圆。我认为使用 turtle 的 circle() 会更快画他们而不是编写自己的代码来生成圆。哈!我被困住了。我看到所产生
我正在创建一个使用 map 的网络应用程序。在 map 上我正在创建圆圈并希望在 div 中显示半径。通过覆盖完成事件完成半径后，我能够显示半径。但我想在创建圆时显示 div 中的半径，以允许用户以自
编辑:我可以用半径除以 Angular 吗？ 问题:为了学习 HTML5 Canvas 中的碰撞艺术，我目前正在尝试让整圆与分段圆(在本例中为半圆)发生碰撞。 我尝试过的:我的第一个想法是一个简单的圆
我发现了其他标题相似的话题，但在这些话题中找不到适合我的解决方案。 我试图通过将相等的宽度/高度与 border-radius:50% 相结合来生成完美圆形的输入标签，但边缘出现像素化。我已经为宽度/
我使用 Google Maps V3 API 创建了一个圆，还尝试制作了一个具有相同半径的标记圆。 问题:我创建的是倾斜的，而谷歌地图创建的是一个漂亮的圆圈。出了什么问题？ Google map V3
这是我一直在处理的图像 目标是检测大圆圈内的小圆圈。 目前我所做的是将图像转换为灰度并应用阈值(cv2.THRESH_OTSU)，从而产生此图像 在此之后，我使用我在stackoverflow上找到的
我正在尝试绘制一张图片，并且绘制了一个矩形，然后我想绘制一个弧形元素，但是这个元素必须是精确的，并且它只是矩形之外的圆的一部分形状。因此，我尝试使用 Arc patch 来创建相同的东西，但形状不匹配
我必须检测 javaFX 程序中两个“球”何时发生碰撞。每次单击按钮时，都会将一个新球添加到 Pane 中。我知道 getChildren() 返回一个可观察列表，其中包含每个球的节点，当我打印带有两
我是一名优秀的程序员,十分优秀！