时间戳

首页 > 解决方案 > 当我想在中心对齐内容时，Justify-self 不起作用

html - 当我想在中心对齐内容时，Justify-self 不起作用

问题描述

我必须使用自动边距来对齐页面中心的内容。 

div {
  background: #121212;
  font-size: 100%;
  display: flex;
}
a {
  color: #fff;
  padding: 2%;
  display: inline-block;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.8) 0%, rgba(18, 18, 18, 0.5) 66.66%), url('https://cml.sad.ukrd.com/image/714544.png');
  background-size: cover;
  background-position: top;
  white-space: nowrap;
  font-size: 18px;
}
img {
  height: 100%;
  width: auto;
  display: flex;
  align-self: center;
  max-height: 50px;
  margin: 0 auto;
  /* fails justify-self: center; */
}
<div>
  <a href="#">⟵ Some Text Goes Here</a>
  <img src="https://cml.sad.ukrd.com/image/714824.png">
</div>

我想了解如何将块图像放置在父 div 的中心。div 已经有另一个<a>孩子，它正在将块图像稍微推出中心。div 父级是一个 flexbox，我认为有一个justify-self: center规则会起作用，但显然不是，因此我必须使用margin: 0 auto，它无论如何都不能完全居中对齐。

块图像如何位于父 div 的死点？

标签： htmlcssflexbox

解决方案

justify-self: center;是 css 的属性grid，而不是flex. https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-self

推荐阅读