Question

尝试在标题中放置文本（商家名称）旁边的图像（徽标）。当页面很小时看起来很好，但是当页面占用更大的计算机屏幕时，图像和文本之间的空间太大。

尝试让文本保持在页面中心，图像在文本的左侧对齐。

 <style>
img {
  float: left;
   width: 90px;
   height: 90px;
   padding-left: 16%;
  }
h1 {
  color: #0C234B;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  padding-top: 20px;
  padding-bottom: 20px;
  font-family: sans-serif;
  font-size: 197%;
  }
 </style>

<header>
 <img src="logo.png"/>
   <h1>Name of Business</h1>
 </header>

Answer 1

我相信这会给你你想要的东西：

<style>
  img {
    width: 90px;
    height: 90px;

    position: absolute;
    left: -90px;
  }
  h1 {
    color: #0C234B;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: sans-serif;
    font-size: 197%;

    display: inline-block;
    width: auto;
    position: relative;
    padding-left: 10px;
  }

  header {
    text-align: center;
    min-width: 500px; /* Optional */
  }
</style>

<header>
  <h1><img src="logo.png" /> Name of Business</h1>
</header>

重要的功能是文本仍然完全居中（因为图像上的position: absolute将其从页面流中移除），但图像和徽标之间的距离由h1填充修复

Answer 2

margin-left: auto;应该是原因。

无论网页的大小如何，都要对齐img和h1

2 个答案: