Html 圆Div未与flexbox对中_Html_Css_Flexbox

Html 圆Div未与flexbox对中

html css

Html 圆Div未与flexbox对中,html,css,flexbox,Html,Css,Flexbox,在我的标题中，我希望在屏幕的中心有一个圆圈，在左边有一个带有我名字的H1标签，并与之成比例。我正在尝试使用flexbox，但是如果我尝试使用justify self:center的话，我找不到一种方法使圆居中，但是它不起作用，我不知道我做错了什么我尝试使用margin:auto，但如果我尝试使用它，它不会使我的个人资料图片居中。类名会妨碍边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

在我的标题中，我希望在屏幕的中心有一个圆圈，在左边有一个带有我名字的H1标签，并与之成比例。我正在尝试使用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>

断点

@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的点，flexbox不适用于flex项目

在这种情况下，使用

行

方向，并且由于您希望仅针对flex容器的一个项目，请使用自动边距，并将

自对齐：居中

替换为

左边距：自动；右边距：自动
如果要居中的元素没有任何默认的上/下边距，也可以使用速记边距：0 auto


此外，这里还有几篇文章介绍如何对齐flex项目：





请发布足够的代码来重现问题（包括图像或占位符）。在Chrome 65中，圆圈在我看来居中。真的吗？我在chrome 65.0.3325.146中工作，但圆圈不是我的中心！无法重现该问题，您忘记了使用四舍五入div的margin:auto
显示“断点”mixinTry（在您的示例中为.profile picture）
@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 ; }
}
}