Question

在我的标题中，我想在屏幕中央有一个圆圈，左边是一个带有我的名字的h 1标签。我正在尝试使用flexbox，但如果我尝试使用justify-self: center，我无法找到一种方法来圈定圆圈，但它不会工作，我也不知道我做错了什么。

我尝试使用保证金：自动，但是如果我尝试的话，这并不会使我的个人资料图片居中，类名是为了保证金。

<!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的地方

Answer 1

justify-self不适用于弹性项目。

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

在这种情况下，使用row方向并且您只想定位其中一个Flex容器的项目，请使用自动边距并将justify-self: center替换为margin-left: auto; margin-right: auto;

如果要居中的元素没有任何默认的上/下边距，也可以使用简写margin: 0 auto。

此外，还有一些帖子，涵盖了如何对齐弹性项目：

Circle Div不以flexbox为中心

1 个答案: