Question

我创建了一个标题，标题会显示在页面的中央。但是，我还希望标题位于标题的左侧。我发现的问题是它将标题推向右边。

这样做是有道理的，但我希望标题保留在标题的中心，而不是被图像向右推。我该怎么做？

＆＃13;

body {
margin: 0;
padding: 0;
}

html {
margin: 0;
padding: 0;
}

#header {
background-color: black;
width: 100%;
height: 100px;
}

.headerHeadings {
text-align: center;
}

a {
color: white;
display: inline-block;
font-size: 40px;
font-family: 'Franklin Gothic';
font: bold;
padding-left: 1%;
padding-right: 1%;
text-decoration: none;
text-transform: uppercase;
transition: height 1s linear;
-webkit-transition: height; /* For Safari */
clear: left;
}

a:hover, a:active {
    background-color: black;
    height: 90px;
}

#headerImage {
float: left;
}

＆＃13;

<nav id="header">
    <div id="headerImage">
        <img src="http://placehold.it/200x100" alt="Logo" width="200" height="100" />
    </div>
    <br />
    <div class="headerHeadings">
        <a href="#">Page 1</a>
        <a href="#">Page 2</a>
        <a href="#">Page 3</a>
        <a href="#">Page 4</a>
    </div>
</nav>

＆＃13;

Answer 1

您可以使用absolute位置代替float：

#header {
  position:relative;
}
#headerImage {
  position:absolute;
  left:0;
  top:0;
}

检查下面的代码段

body {
  margin: 0;
  padding: 0;
}
html {
  margin: 0;
  padding: 0;
}
#header {
  background-color: black;
  width: 100%;
  height: 100px;
  position:relative;
}
.headerHeadings {
  text-align: center;
}
a {
  color: white;
  display: inline-block;
  font-size: 40px;
  font-family: 'Franklin Gothic';
  font: bold;
  padding-left: 1%;
  padding-right: 1%;
  text-decoration: none;
  text-transform: uppercase;
  transition: height 1s linear;
  -webkit-transition: height;
  /* For Safari */
  clear: left;
}
a:hover,
a:active {
  background-color: black;
  height: 90px;
}
#headerImage {
  position:absolute;
  left:0;
  top:0;
}

<nav id="header">
  <div id="headerImage">
    <img src="logo.jpg" alt="Logo" width="200" height="100" />
  </div>
  <br />
  <div class="headerHeadings">
    <a href="#">Page 1</a>
    <a href="#">Page 2</a>
    <a href="#">Page 3</a>
    <a href="#">Page 4</a>
  </div>
</nav>

_{请注意，使用此功能可能会导致屏幕小尺寸重叠的问题，您可以使用媒体查询避免这种情况，或者如果您不需要响应行为，请在标题上使用固定宽度< /子>}

标题中的浮动图像将标题推开

1 个答案: