centre image in header

Ich bin im Moment im Rahmenprogramm zu programmieren. Aber ich kann nicht verstehen, warum das Bild in der gelben Menüleiste linksbündig ist? Ich möchte, dass das Bild zentriert wird. Ich habe alles in der Dokumentation versucht, aber das funktioniert nicht für mich. Hat jemand einen anderen Vorschlag?centre image in header

My Site Example

<body> 
    <table class="body"> 
    <tr> 
     <td class="center" align="center" valign="top"> 
     <center> 

      <table class="row" style="background-color:yellow;"> 
      <tr> 
      <td class="center" align="center"> 
      <center> 
       <table class="container"> 
       <tr> 
        <td class="wrapper last"> 
        <table class="twelve columns"> 
         <tr> 
         <td> 
          <img width="250" height="80" src="http://placehold.it/580x300"> 
         </td> 
         </tr> 
        </table> 
        </td> 
       </tr> 
       </table> 
      </center> 
      </td> 
     </tr> 
     </table> 
     <br> 

     <table class="container"> 
     <tr> 
      <td> 
      <!-- content start --> 
      <table class="row"> 
       <tr> 
       <td class="wrapper last"> 
        <table class="twelve columns"> 
        <tr> 
         <td> 
         <h1>Hi, Elijah Baily</h1> 
         <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p> 
         <img width="580" height="300" src="http://placehold.it/580x300"> 

         </td> 
         <td class="expander"></td> 
        </tr> 
        </table> 
       </td> 
       </tr> 
      </table> 
      </td> 
     </tr> 
     </table> 
     </center> 
    </td> 
    </tr> 
</table>

Quelle

2017-01-31 Ne Kr

In Ihrer Website Beispiel Sie body, table.body, h1, h2, h3, h4, h5, h6, p, td mit Immobilien text-align:left haben. und loswerden von display: block; float: left; von Ihrer IMG-Klasse.

Beachten Sie, dass wenn Sie text-align:center machen wird es das gesamte Formular beeinflussen wird. Also mach eine andere Klasse dafür.

Quelle

2017-01-31 08:09:49 Minksmnm

@ Ne Kr funktioniert. entfernen 'img { Anzeige: Block; Schwimmer: links; } 'von Ihrem' 'Element und in der' 'darüber fügen Sie' text-align: center' – Minksmnm

Arbeiten, danke :-) –

an Ihrem Standort Beispiel sucht, hat das <img> Element die folgenden Stile:

img { 
    display: block; 
    float: left; 
}

Beide Arten das Verhalten verursachen. Erstens, das display: block bewirkt, dass das Bildelement die volle Breite seines Containers einnimmt, auch wenn das Bild selbst nicht so aussieht. Zweitens verschiebt das float: left das Bild auf die linke Seite seines Containers.

Entfernen Sie diese beiden Stile und das Bild wird zentriert.

Quelle

2017-01-31 08:03:52

Sie für den Kommentar danken. Ich habe versucht, die '/ * img.center { margin: 0 auto; Float: keine; } */', aber das Bild ist immer noch linksbündig. Ich werde gerade den neuen Code auf die Adresse hochladen, die ich in der Frage –

angegeben habe. Sie müssen auch den 'display: block'-Stil entfernen. Lassen Sie mich wissen, wenn Sie den neuen Code hochgeladen haben –

Entfernen Sie einfach "zwölf Spalten" -Klasse von Header-Teil Ihres HTML, die das Logo umhüllt und das Logo zentriert wird. – Rahul

Sie sollten eine Klasse als ‚topImage‘ zum Bild hinzufügen und folgende CSS CSS-Datei hinzufügen:

.topImage { 
    float: none; 
    margin: 0 auto; 
}

Quelle

2017-01-31 08:09:34

Habe es einfach versucht, es tut nichts –

Die Antwort von Rahul sollte funktionieren. Entfernen von 'zwölf Spalten' Klassen und kein Hinzufügen 'Container' Klasse weder –

Entfernen Sie die Breite Teil von diesem css:

table.container { 
    /*width: 580px;*/ 
    margin: 0 auto; 
    text-align: inherit; 
}

Quelle

2017-01-31 08:14:32 Rahul

Tut nichts: -/http://vouzalis.com/template -test.html –

aktualisierte die Antwort. Es sollte jetzt funktionieren. – Rahul

centre image in header

Antwort

Verwandte Themen