我怎么会做出这种形象不与标题

这里的位置是干扰是什么样子： enter image description here 我怎么会做出这种形象不与标题

如果我删除的图像，完美的文本中心： enter image description here

@AB

我的意思是，它的工作...排序。 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; 
}

来源

2014-12-02 Jurdun

有链路上没有图像。 – vaso123 2014-12-02 14:57:19

选中此[示例]（http：// jsfiddle。net/benjaminthomas/gkyrvdpL /）我认为一切顺利 – Benjamin 2014-12-02 14:57:54

此外''中心'标记已被弃用，不应再使用。 – 2014-12-02 14:57:59

我怀疑有一些东西我们没有看到和您现有的代码似乎要被罚款，虽然我已删除了center标签，该标签已被弃用并取代text-align:center。

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

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; 
 
}

<header> 
 
    <img src="http://placekitten.com/g/200/300" alt= "logo"/> 
 
    <h1>Mobile Cat Grooming Service</h1> 
 
</header>

来源

2014-12-02 15:24:35

Theres其他代码我认为是最相关的 – Jurdun 2014-12-02 15:31:09

您已更改原始问题的代码。图像不再浮动，现在具有绝对位置。 – 2014-12-02 15:34:45

哎呀抱歉，让我改变一下。 – Jurdun 2014-12-02 15:36:10

试试这个

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; 

}

来源

2014-12-02 15:09:19

有几种不同的方式来做到这一点，你可以在你的形象使用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%; 
}

来源

2014-12-02 15:12:23 NatureShade

我不知道你想怎么比网页和/或标题，但图像推你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/

来源

2014-12-02 15:12:30 hungerstar

我希望它在文本旁边，但不是将文本推向右边。究竟在哪里，唯一的问题是推动它。你说这是因为它漂浮了吗？我会做什么来解决这个问题，我删除了浮动，但它呈现相同的结果。 – Jurdun 2014-12-02 15:14:17

这与A.B的答案有相同的结果。看看这个图像的问题。 – Jurdun 2014-12-02 15:25:05

小提琴的作品，所以你的代码必须有其他的东西。 – hungerstar 2014-12-02 15:27:51

我怎么会做出这种形象不与标题

回答

相关问题