メインdivブロックのテキストを中央に配置する方法

ここに私が何を持っています。 #header divにpandoraとrocket leagueとchess.comを配置します。今、彼らは左にいる。メインdivブロックのテキストを中央に配置する方法

<!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>

出典

2017-02-28 Daniel Archuleta

あなたはCSSを持っていませんか？ – Johannes

私はあなたが後にしている正確に何を把握しよう少しこだわっているが、ここではあなたが後にしているものであり得る1つのソリューションです：

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

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

注：がテストされていないが、したがって、これはうまくいかない可能性がありますが、少なくともこのアイディアの背後にある理論は使用すべきです。

出典

2017-03-01 00:28:12

素晴らしいですね。しかし、なぜ、どうしてもわかりません。私は内容が何を意味するのか、ヘッダーで両方をクリアした理由は分かりません。説明してください、ありがとう。 –

@DanielArchuleta '.header：after'のスタイルは、clearfixのスタイルです。要素を浮動させるとき、親の要素をクリアして、文書の流れが壊れないようにする必要があります。詳細については、[ここ]（http://stackoverflow.com/questions/8554043/what-is-a-clearfix）をチェックしてください。 –

@DanielArchuletaあなたの質問にうまく答えているとマークするようお願いします。それは感謝される:) –

これはあなたが探しているものかどうかわかりません。

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

これは、ヘッダー分割の内容を中央に配置します。あなたのCSSに追加したい場合は：

#header{ 
    text-align: center; 
}

出典

2017-02-28 19:11:56 EddyG

を使用すると、中央のすべてのコンテンツを望むなら、あなたは#headerにtext-align: centerを適用することができます。

出典

2017-02-28 19:12:08 James

これはまだ動作しませんでした。私は最初のdivの間のテキストではないが、それはタグのテキストだと思う。その他の提案はありますか？ –

これを試してみてください：

（デフォルトではインライン要素です）あなたの aタグ、スパンと画像がでているブロック要素のクラスです

.hovimg { text-align: center; }

- それは一緒に（すべてをセンタリングすべきである - 彼らはしています1行）。

出典

2017-02-28 23:53:07 Johannes

メインdivブロックのテキストを中央に配置する方法

答えて

関連する問題