Question

以下是它的样子： enter image description here

如果删除图像，文本将完美居中： enter image description here

@ A·B

我的意思是，它有效......排序。 enter image description here

我在向右侧推动标题的图像方面存在一些问题，正如您所看到的，它并非完全居中。

HTML：

<!doctype html>
<head>
    <meta charset="UTF-8">
    <meta name"description" content"Mobile Cat Grooming Service">
    <meta name"keywords" content"Cat, Grooming, Service, Colchester">
    <meta name"author" content"Jordan Downs">
    <title>Index</title>

    <link rel="stylesheet" type="text/css" href="master.css"/>
    <script type="text/javascript">
    function changeFontSize(element, step) {
    var el = document.getElementById(element);
    var curFont = parseInt(window.getComputedStyle(el).fontSize, 10);
    el.style.fontSize = (curFont + step) + 'px';
    }
    </script>
    <script>
function changecolor(code) {
    document.body.style.backgroundColor=code
}
</script>
</head>
    <h2>
        <center>
        <button type="button" onClick="changeFontSize('content', 2);">A+</button>
        <button type="button" onClick="changeFontSize('content', -2);">A-</button>

    <script language="javascript" type="text/javascript"></script>
    <form>
        <input type="button" name="Button1" value="Default" onclick="changecolor('white')">
        <input type="button" name="Button1" value="Scheme 1" onclick="changecolor('#FE2EF7')">
        <input type="button" name="Button1" value="Scheme 2" onclick="changecolor('#FA58D0')">
        <input type="button" name="Button1" value="Scheme 3" onclick="changecolor('#B404AE')">
    </form>
        </center>
</h2>
<body>
    <div id="page">
    <header>
        <img src="Images/catlogo.jpg" alt= "logo"/>
        <h1><center>Mobile Cat Grooming Service</center></h1>
    </header>
    <nav>
        <ul>
        <li><a alt="Home button" href="index.html">Home</a></li>
        <li><a alt="History page button" href="history.html">History</a></li>
        <li><a alt="Appointment page button" href="appointments.html">Appointments</a></li>
        <li><a alt="Contact us page button" href="contactus.html">Contact us</a></li>
        </ul>
    </nav>
</head>

CSS：

 body {
    font-family: arial, helvetica, sans-serif;
    line-height: 1.8em;
    zoom: 150%;
}

#page {
    margin:2% auto;
    width: 100%;
    overflow: hidden;
}



header {
    float: left;
    clear: both;
    width: 96%;
    color: #fff;
    background-color: #660066;
    padding: 1%;
    margin-left: 1%;    
}

header img {
  float: left;
  width: 12%;
  height: 12%;
  background: #660066;

 }


h2 {
    float: left;
    margin-bottom: -1%;
    width: 96%;
    color: #fff;
    background-color: #660066;
    padding: 1%;
    margin-left: 1%;
    border-bottom: 2px solid;
    border-color: #Cc3399;
}
nav {
    font-family: "Times New Roman";
    position: relative;
    margin: auto;
    padding: 0;
    list-style: none;
    width: 100%;
    height: 100%;
    text-align: center;
}


nav ul li {
    display: inline-block;
}

nav ul li a {
    display: inline-block;
    text-decoration: none;
    padding: 5px 0;
    width: 100px;
    background: #Cc3399;
    color: #eee;
    float: left;
    text-align: center;
    border-left: 1px solid #fff;
}

nav ul li a:hover {
    background: #660066;
    color: #fff;
}

Answer 1

我怀疑有些内容我们没有看到，因为您现有的代码似乎没有问题，尽管我删除了已被弃用并替换为center的{{1}}代码。

如果它仍然不在您的FULL HTML中心，那么我们需要检查代码的其余部分。

text-align:center

header {
    float: left;
    clear: both;
    width: 96%;
    color: #fff;
    background-color: #660066;
    padding: 1%;
    margin-left: 1%;    
}

header img {
  float: left;
  width: 12%;
  height: 12%;
  background: #660066;

 }

header h1 {
    text-align: center;
}

Answer 2

试试这个

header {
    float: left;
    clear: both;
    width: 96%;
    color: #fff;
    background-color: #660066;
    padding: 1%;
    margin-left: 1%;    
    position:relative;
}
header img {

  width: 12%;  
  height: 12%;  
  background: #660066;
  position:absolute;
  left:0;
  top:0;

 }

Answer 3

有几种不同的方法可以做到这一点，您可以在图片中使用position:absolute;，或者更加可扩展的方式是这样的：

<header>
    <img src="Images/catlogo.jpg" alt= "logo"/>
    <h1 class="centerTitle">Mobile Cat Grooming Service</h1>
</header>

的CSS：

centerTitle {
    width: 100%;
    text-align: center;
    margin-left: -12%;
}

Answer 4

我不确定你的图像与页面和/或标题相比是如何对齐的，但是图像推动h1的原因是因为它正在浮动，因此被取出正常的文件流程。 h1排成一行，好像浮动的图像不在那里。 h1转换的原因是它占用的空间仍然受到尊重，即使它已从正常的文档流中取出。

一旦我知道了所需的布局，我就可以提出进一步的建议。

编辑1

我可能会使用absolute positioning来解决这个问题。

<header>
    <img src="http://lorempixel.com/150/200/city">    
    <h1>Your Title Here</h1>
</header>

header {
    text-align: center;
    position: relative;
}
header img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* use this if you're having stacking issues */
}

这是一个演示上述代码的jsFiddle：http://jsfiddle.net/3h5zdzbr/1/

如何使这个图像不干扰标题的位置

4 个答案: