Question

我很难让我的图片居中并且反应灵敏而不会重叠我的文字。我该如何解决这个问题。

＆＃13;

div.shadow {
    position: absolute;
    max-width: 45%;
    max-height: 45%;
    top: 50%;
    left:50%;
    overflow: visible;
}
img.logo {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    margin-top: -50%;
    margin-left: -50%;
}
header {
    text-align: center;
    color: black;
    text-decoration: none;
    font-size: 40px;
    font-family: 'existencelight';
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 10px;
    margin: 0px;
    width: 100%;
}

＆＃13;

<header>
  <h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="bg3.jpg" /></div>

＆＃13;

Answer 1

你的div中有绝对位置，所以你可以调整最高值

div.shadow {
 position: absolute;
 max-width: 45%;
 max-height: 45%;
 top: 200px;  /* just a sample  with a fixed  pixel value */
 left:50%;
 overflow: visible;
}

或尝试使用

 position: relative;

Answer 2

该图像可能应该是背景。

＆＃13;

header {
  text-align: center;
  color: black;
  text-decoration: none;
  font-size: 40px;
  font-family: 'existencelight';
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 40px;
  margin: 0px;
  width: 100%;
  background: url('http://kenwheeler.github.io/slick/img/fonz1.png') center top no-repeat;
  background-size: contain;
}

＆＃13;

<header>
  <h1>Welcome to Nepali Kitchen</h1>
</header>

＆＃13;

或者您可以通过修改z-index将该图像移到文本后面。

＆＃13;

div.shadow {
  position: absolute;
  max-width: 45%;
  max-height: 45%;
  top: 50%;
  left: 50%;
  overflow: visible;
}

img.logo {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  margin-top: -50%;
  margin-left: -50%;
  z-index: -1;
}

header {
  text-align: center;
  color: black;
  text-decoration: none;
  font-size: 40px;
  font-family: 'existencelight';
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 10px;
  margin: 0px;
  width: 100%;
}

＆＃13;

<header>
  <h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png" /></div>

＆＃13;

Answer 3

这是因为元素的定位。

如果您想要一个固定的标题，您的内容需要按下标题的高度。通过将您的内容包装在容器中，并将其margin-top等于标题的height来执行此操作。

header {
    position: fixed;
    height: 100px;
}

.content-container {
    position: relative;
    margin-top: 100px; 
}

你的HTML：

<header></header>
<div class="content-container">
</div>

为您的内容容器添加position: relative。如果您想将项目置于中心位置，可以使用flexbox或给它margin: 0px auto;。

位置相对意味着它的相对于其他元素定位。

我在你的代码中注意到的其他一些事情可以做得更好/更清洁：

将单位em或rem用于font-size
没有必要在类前面添加元素（div.shadow - ＆gt; .shadow和img.logo - ＆gt; .logo）
我还建议您在CSS Box Model之后订购CSS。这样可以选择更清晰的代码和更好的可读性。

这意味着你会得到这样的东西：

.class {
    // Positioning first
    position: relative;
    top: 0;
    right: 0;
    z-index: 1;

    // It's size
    width: 500px;
    height: 500px;

    // It's margin
    margin: 0px auto;

    // It's border
    border: 1px solid blue;

    // It's padding
    padding: 2em 0;

    // Content styling
    color: #676766;
    background: blue;
}

Answer 4

(ex page-feedback.php,page-contact.php)

如何使我的图像居中而不会在html＆amp;中重叠我的文本CSS

4 个答案: