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

标签 html css flexbox

<分区>

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

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>

我想了解如何将 block 图像定位在父 div 的中心。该 div 已经有另一个 <a> child ,它正在将 block 图像稍微推出中心。 div parent 是一个 flexbox,我假设有一个 justify-self: center规则会起作用,但显然不起作用,因此我不得不使用 margin: 0 auto ,无论如何它都不能很好地居中对齐。

block 状图片怎么会在父div的死 Angular 呢?

最佳答案

justify-self: center; 是 css grid 的属性,不是 flexhttps://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-self

关于html - 当我想在中心对齐内容时,Justify-self 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52756205/

上一篇:javascript - 如何使用javascript获取h1标签的高度?

下一篇:javascript - 多行输出文本

相关文章:

javascript - 如何在翻转时替换文件夹名称?

CSS:元素在 flexbox 布局上没有固定高度

html - 在列之间添加空格而不丢失网格系统布局

css - 证明内容与对齐元素之间的区别?

html - 使用媒体查询更改站点宽度

javascript - html 表单值到 javascript 数组

javascript - 在 contenteditable 游标中添加 span 标签后移动到 IOS safari 中结束

html - CSS 渐变在 html5 网站中应用不正确

javascript - 单击后更改按钮链接

html - Bootstrap 3.0 文本在刷新时消失