Question

在我的网页中，在标题部分我有这样的代码：

<header>
    <span>Test</span>
    <span>Test</span>
    <img src="http://serwer1417769.home.pl/foty/cyfrowe/LM358N/2.JPG" />
    <span>Test</span>
    <span>Test</span>
</header>

在一个比桌面更小的屏幕中，我想让它显示在一个单独的行中居中，这些跨度显示在一行中。我不知道该怎么做。我试图使用浮动属性，现在我正在尝试位置属性，但我只设置了居中图像; span元素显示在一行但不在下面。

header {
  position: relative;
  width: 60%;
  letter-spacing: 8px;
}
header span {
  padding-left: 2%;
}
header img {
  position: absolute;
  margin: auto;
  top: 0;
  left: 50%;
  right: 0;
}

以下是我尝试执行此操作的codepen：http://codepen.io/anon/pen/ZGgBeM

Answer 1

关于这应该如何在桌面上看起来并不完全清楚，但flexbox可以做到这一点。

* {
  box-sizing: border-box;
}
header {
  width: 50%;
  border: 1px solid grey;
  margin: 10px auto;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
span {
  flex: 0 0 50%;
  background: lightblue;
  border: 1px solid grey;
}
img {
  display: block;
  max-width: 100%;
  margin: auto;
}
.wrap {
  flex-basis: 100%;
}
@media (max-width: 780px) {
  span {
    flex-basis: 25%;
    order: 2
  }
}

<header>
  <span>Test</span>
  <span>Test</span>
  <div class="wrap">
    <img src="http://serwer1417769.home.pl/foty/cyfrowe/LM358N/2.JPG" />
  </div>
  <span>Test</span>
  <span>Test</span>
</header>

Codepen Demo

Answer 2

你想要这样的东西吗？ http://codepen.io/anon/pen/GJVNBW

@positionLeft: 50%;
@containerWidth: 60%;
header {
  position: relative;
  width: @containerWidth;
  border:1px solid red;
  letter-spacing: 8px;
  padding-top:240px;
  text-align:center;
  span {
    padding-left: 2%;
  }
  img {
    position: absolute;
    left:50%;
    top:0;
    margin-left:-135px;
  }
}

使用img从常规static流程中取出absolute 定位。
使用span作为，将text-align与中心对齐 center
通过应用img将绝对定位50%置于居中位置左侧和半宽度使用负margin-left
使用span将img向下推到padding-top以下。请注意absolute定位img不受此填充的影响。

CSS：改变元素的位置

2 个答案: