我怎麼會做出這種形象不與標題

這裏的位置是干擾是什麼樣子： 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

我怎麼會做出這種形象不與標題

回答

相關問題