So zentrieren Sie Text im Haupt-Div-Block

Hier ist, was ich habe. Ich versuche pandora, rocket league und chess.com im #header div. Zu zentrieren. Im Moment sind sie auf der linken Seite.So zentrieren Sie Text im Haupt-Div-Block

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 

<link type="text/css" rel="stylesheet" href="abc.css"/> 

<div id="top"></div> 

<div id="header"> 
    <div class="hovimg"> 
     <a href="https://www.chess.com"> 
      Chess.com 
      <span> 
       <img src="https://tmp-m.org/wp-content/uploads/2015/02/chess.jpg" height="100px" width="180px"/> 
      </span> 
     </a> 
    </div> 
    <div class="hovimg"> 
     <a href="https://www.pandora.com"> 
      Pandora 
      <span> 
       <img src="https://c.slashgear.com/wp-content/uploads/2016/10/pandora-rebrand-980x420.png" height="100px" width="150px"/> 
      </span> 
     </a> 
    </div> 
    <div class="hovimg"> 
     <a href="steam://rungameid/252950"> 
      Rocket League 
      <span> 
       <img src="http://static5.gamespot.com/uploads/screen_kubrick/1551/15511094/2999833-20141023_rocketleague_01.jpg" height="120px" width="200"/> 
      </span> 
     </a> 
    </div> 
</div> 
<div id="left"></div> 

</body> 
</html>

Quelle

2017-02-28 Daniel Archuleta

Sie haben kein CSS? – Johannes

Ich bin ein wenig stecken versuchen, genau herauszufinden, was Sie nach, aber hier ist eine Lösung, die, was Sie sein können, nach:

.header:after { /* Clearfix */ 
    content: ""; 
    display: table; 
    clear: both; 
} 

.hovimg { 
    width: calc(100%/3); 
    float: left; 
}

Hinweis: wurde nicht getestet, Es ist also möglich, dass dies nicht funktioniert, aber zumindest die Theorie hinter dieser Idee sollte nützlich sein.

Quelle

2017-03-01 00:28:12

Super, das ist es! Nicht ganz sicher warum. Ich verstehe nicht, was der Inhalt "" bedeutet und wieso du beides im Header gelöscht hast. Bitte erklären, danke. –

@DanielArchuleta Die Stile unter '.header: after' sind die für Clearfix. Wenn Sie ein Element verschieben, muss dessen übergeordnetes Element gelöscht werden, um sicherzustellen, dass der Dokumentenfluss nicht unterbrochen wird. Überprüfen Sie [hier] (http://stackoverflow.com/questions/8554043/what-is-a-clearfix) für weitere Informationen. –

@DanielArchuleta Würdest du mich bitten, dies so zu markieren, als ob du deine Frage erfolgreich beantwortet hast? Es würde geschätzt werden :) –

Ich bin mir nicht sicher, ob das ist, was Sie suchen.

<div id="header" style="text-align:center">

Dies wird den Inhalt der Header-Division zentrieren. Wenn Sie es zu Ihrem CSS hinzufügen möchten:

#header{ 
    text-align: center; 
}

Quelle

2017-02-28 19:11:56 EddyG

Wenn Sie alle Inhalte in der Mitte, dann können Sie text-align: center-#header anwenden.

Quelle

2017-02-28 19:12:08 James

Dies funktionierte immer noch nicht. Ich denke, es ist, weil es nicht der Text zwischen den ursprünglichen divs ist, aber es ist Text des Tags . Irgendwelche anderen Vorschläge? –

Versuchen Sie folgendes:

.hovimg { text-align: center; }

, dass die Klasse der Blockelemente ist Ihre a Tags, Spannweiten und Bilder (die standardmäßig Inline-Elemente sind) sind in - es sollte ihnen Zentrum (alle zusammen - sie sind in eine Linie).

Quelle

2017-02-28 23:53:07 Johannes

So zentrieren Sie Text im Haupt-Div-Block

Antwort

Verwandte Themen