Text und Bilder werden nicht zentriert auf meiner Seite

Question

Ich mache meine erste Webseite und ich habe die Elemente, die ich will- ich kann nicht scheinen, dass sie auf der Seite zentrieren. Ich habe Rand versucht: Auto, Text-Align: Center und viele andere Dinge. Nichts hat funktioniert.

Ich möchte die Kopfzeile, ein Bild und eine Schaltfläche am Ende meiner Seite, um eine zentrale Wirbelsäule auf meiner Seite sein. Irgendwelche Vorschläge würden geschätzt werden.

Dank

ist hier mein Code:

HTML:

<div class="container"> 

<h1 class="text-center"> My tribute to Ami Coxill Moore</h1> 
</div> 

CSS

body {margin-top: 100px; 
background-color: #ff69b4; 
font-family: "gerogia", serif; 
color: #0000ff; } 


h1 { 
display: inline-block; 
background-color: yellow; 
font-size: 300%; 
border: solid; 
border-radius: 25px; 
align: center; 
padding-left: 40px; 
padding-right: 40px; 
float: center; 
max width: 100%; 
text-align: center; 
marrgin: 0 auto; 
float: center;} 

div { 
padding-bottom: 20px; 
padding-right: 50px; 
padding-left: 50px;} 

.img-responsive { 
margin: 0 auto;} 

.img-resize { 
max-width: 400px; 
max-height: auto;} 

Answer 1

Sie die Container text-align

<div class="container" style="text-align: center;"> 

die div hinzufügen müssen, dass Ihr Element wickelt ist die verantwortliche das Element auszurichten.

Answer 2

eine Klasse definieren und es zum Beispiel .text-center und im Innern text-align: center, setzen nennen, wenn Sie einen Text nur diese Klasse gibt das Containerelement (Elternelement) zentrieren mögen.

Hoffe, dass dies Ihr Problem lösen.

body {margin-top: 100px; 
 
background-color: #ff69b4; 
 
font-family: "gerogia", serif; 
 
color: #0000ff; } 
 

 
.text-center { 
 
    text-align: center; 
 
} 
 
h1 { 
 
display: inline-block; 
 
background-color: yellow; 
 
font-size: 300%; 
 
border: solid; 
 
border-radius: 25px; 
 
padding-left: 40px; 
 
padding-right: 40px; 
 
max width: 100%;} 
 

 
div { 
 
padding-bottom: 20px; 
 
padding-right: 50px; 
 
padding-left: 50px;} 
 

 
.img-resize { 
 
max-width: 400px; 
 
max-height: auto;}

<div class="container text-center"> 
 
    <h1> My tribute to Ami Coxill Moore</h1> 
 
</div> 
 
<!-- picture of ami here --> 
 
<div class="container text-center"> 
 
    <div class="row"> 
 
    <div class="col-xs-4 col-xs-offset-4"></div> 
 
      <a href="#add-fastrack"><img class="img-resize img-center img-zero image-border img-responsive" src="https://i.imgur.com/Lc5nBon.jpg" alt="Ami laughing at her 26th Birthday"> </a> 
 
    </div> 
 
</div>

Answer 3

Es gibt einige Fehler in Ihrem Code, zum Beispiel, Sie von max-width: 100%; ohne max width: 100%; oder text-align: center; kein align: center; Wert für float ist left oder right so float:center ist falsch verwenden müssen, und andere Fehler .

siehe mein Code:

body { 
 
    margin-top: 100px; 
 
    background-color: #ff69b4; 
 
    font-family: "gerogia", serif; 
 
    color: #0000ff; 
 
} 
 

 
h1 { 
 
    background-color: yellow; 
 
    font-size: 300%; 
 
    border: 1px solid; 
 
    border-radius: 25px; 
 
    text-align: center; 
 
    padding-left: 40px; 
 
    padding-right: 40px; 
 
    max-width: 100%; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
} 
 

 
div { 
 
    padding-bottom: 20px; 
 
    padding-right: 50px; 
 
    padding-left: 50px; 
 
} 
 

 
.row { 
 
    text-align: center; 
 
} 
 

 
.row img { 
 
    display: inline-block; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="container"> 
 
    <h1 class="text-center"> My tribute to Ami Coxill Moore</h1> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <a href="#add-fastrack"><img class="img-resize img-center img-zero image-border img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w" alt="Ami laughing at her 26th Birthday"> 
 
    </a> 
 
    </div> 
 
</div>