Question

寻找一种解决方案，将用户的个人资料图片保留在h1旁边，并且无论屏幕尺寸如何，都要保持两侧的边距均等。 h1通过text-align居中，但我无法弄清楚如何将img保持在h1旁边。此刻，img向左浮动，当我注释掉浮动：左，img中心，h1消失。这里是包含img和h1，然后是img和h1的div的代码。

.biohead {
    width: 100%;
    position: fixed;
    text-align: center;
    display: block;
    padding-bottom: 1%;
    color: dimgray;
    font-size: 2.5em;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
}
.biohead img {
  height: 50px;
  border-radius: 39px;
  width: 50px;
  margin-top: 5px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  /*margin-left: 15%;*/
  /*margin-right: 11px;*/
}
.biohead h1 {
/*    float: left;
*/    margin: 0 auto;
    margin-top: 10px; 
}

和html：

  <div class="biohead">
     <img src="images/fisherman.png" alt="Raul">
     <h1>Raul Pescadero</h1> 
  </div> <!--biohead-->

Answer 1

制作h1和img display: inline-block并移除浮动。它们都将以div上现有的text-align: center为中心。

此外，将它们设置为vertical-align: middle，因为默认的baseline值可能会导致其他元素出现意外行为。

目前，包装div应该有一个合适的min-width，因此它不会太小而导致线被破坏。

工作示例

在这个例子中，我删除了身体的默认边距以及不需要的填充底部。

body {
margin: 0;  
}

.biohead {
  width: 100%;
  position: fixed;
  text-align: center;
  display: block;
  color: dimgray;
  font-size: 2.5em;
  box-shadow: 0 0 15px rgba(0, 0, 0, .2);
  min-width: 600px;
}
.biohead img {
  height: 50px;
  border-radius: 39px;
  width: 50px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px;
}
.biohead h1 {
  display: inline-block;
  vertical-align: middle;
}

<div class="biohead">
  <img src="http://www.placehold.it/50" alt="Raul">
  <h1>Raul Pescadero</h1> 
</div>
<!--biohead-->

将图像保持在h1旁边，无论屏幕大小如何都都居中

1 个答案:

工作示例