时间戳

首页 > 解决方案 > 如何跨行移动png

html - 如何跨行移动png

问题描述

我有这两个 css 命令。

code h1 {
background: #000000;
border-radius: 6px;
color: #fff;
display: block;
font: 40px/60px "Sans", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 40px 40px;
text-align: center;
margin: 0 0% 40px 0%;
.header img {
float: right;
width: 100px;
height: 100px;
background: #000000;

一种用于将网站名称放在中间，用黑条包围它。该网站的徽标目前与文本在同一行的右上角，但我怎样才能将它从最右边移到左边一点。据我了解 float: right 不与 margin-right 一起使用，但通过使用边距，只有徽标与文本不在同一行，

标签： htmlcss

解决方案

你可以使用弹性盒子：

{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

UPD。

灵活的盒子布局模块，可以更容易地设计灵活的响应式布局结构，而无需使用浮动或定位。

  • 为了定义 flex box modal，我们在 css中使用display: flex属性。

  • justify-content属性用于对齐弹性项目。可能的选项是：

    • flex-start（默认）：项目在开始时被打包。
    • flex-end : 物品被包装到最后。
    • start：项目在开始时打包。
    • end：物品被包装到最后。
    • left：物品被包装在容器的左边缘。
    • right：物品被包装在容器的右边缘。
    • center：项目沿线居中
    • space-between：项目均匀分布在行中；第一项在起始行，最后一项在结束行
    • space-around：项目均匀分布在行中，周围空间相等。请注意，视觉上的空间是不相等的，因为所有项目的两边都有相等的空间。第一个项目将在容器边缘有一个空间单位，但下一个项目之间有两个空间单位，因为下一个项目有自己的适用间距。
    • space-evenly：项目的分布使得任何两个项目之间的间距（以及边缘的空间）相等。

  • align-items属性用于垂直对齐弹性项目：

    • 拉伸（默认）：拉伸以填充容器（仍然尊重最小宽度/最大宽度）
    • flex-start / start / self-start：项目放置在交叉轴的开始处。
    • flex-end / end / self-end：项目放置在横轴的末端。
    • center：项目在横轴上居中
    • 基线：项目对齐，例如它们的基线对齐

有用信息：https ://www.w3schools.com/css/css3_flexbox.asp#align-items

这是每个 Web 开发人员都必须知道的。

推荐阅读