私は、画面の中央にロゴを整列すると、テキストはこれが私のHTMLコードで画像

と一致している右image.But後の数行を表示：私は、画面の中央にロゴを整列すると、テキストはこれが私のHTMLコードで画像

<img class="centeredimage" src="BLACK.jpg"><br><br> 
     <p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br> 
     <span class = "a2017">Welcome to 2017</span><br><br> 
     <span class="coming_soon">Coming Soon</span></p><br><br>

これは私のCSSコードです：

.centeredimage { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -100px; 
    width: 200px; 
    height: 200px; 
     } 
.new{ 
     color:#FFFFFF; 
     } 

.main_text{ 
     font-size:20px; 
     letter-spacing: 8px; 
     } 
.a2017{ 
      font-size:15px ; 
      letter-spacing:2px ; 
     } 
.coming_soon{ 
     letter-spacing: 1px; 
     }

画像が画面の中央に整列される代わりに、画像の後に表示されたばかりのテキストがimage.Howと一致する表示され、両方が中央に整列するように、私はそれが画像の後に来る作るのですか中央の画面の？

出典

2017-05-14 Aman50

あなたが「後」とはどういう意味ですか。あなたは「下に」、あるいは「右に」という意味ですか？ –

次の行の後に意味します。 – Aman50

は、私は、例えば、画面の中央にローダーを物事を中心に、このコードを使用し、この

.centeredimage { 
display : block; 
width: 200px; 
margin: auto; 
...

出典

2017-05-14 16:27:09 user10089632

を試してみてください。それは複数の部分を持つことができますが、それは重要ではありません。あなたはちょうど1つのdivにすべての部品を入れます。私は "マージン"トリックを使用していましたが、やはりここでやっていますが、最近はテーブル/テーブルセルを使って仕事をしています。どこでも使えます（10歳のブラウザは扱いません）。以下はストレート指導サンプルからいくつかのコードです：

<style> 
     .app_style { 
      width: 100%; 
      height: 100%; 
      display: table; 
     } 
     .loader_style { 
      display: table-cell; 
      text-align: center; 
      vertical-align: middle; 
     } 
     .loader_icon_style { 
      border: 2px solid lightgray; 
      border-radius: 5px 5px 5px 5px; 
     } 
     .loader_bar_padding { 
      padding-top: 10px; 
     } 
     .loader_blurb { 
      width: inherit; 
      text-align: center; 
      font-size: 14px; 
      font-weight: bold; 
      color: yellow; 
      font-style: italic; 
     } 
    </style> 

</head> 

<body> 
    <sample-app class="app_style"> 
     <div class="loader_style"> 
      <img class="loader_icon_style" src="assets/images/r2-d2.jpg" /> 
      <div class="loader_blurb loader_bar_padding"> 
       May the force be with you... 
      </div> 
      <img class="loader_bar_padding" src="assets/images/loader-bar.gif" /> 
     </div> 
    </sample-app> 
</body>

出典

2017-05-14 16:29:06

あなたがイメージとテキストを中央揃えたい場合は、絶対位置を使用し、主にあればそうでない場合は、テキストは、DOM上の他の論理に従うだけで、画像を揃えていませんテキストではなく画像用です。

センターに揃えられたラッパーdivを使用して、すべてのコンテンツを配置することができます。

body { 
 
background-color:#ff00ff; 
 
} 
 

 
.wrapper { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -150px; 
 
    margin-left: -100px; 
 
    width: 200px; 
 
    height: 300px; 
 
} 
 

 

 
.your_image { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.new { 
 
    color: #FFFFFF; 
 
} 
 

 
.main_text { 
 
    font-size: 20px; 
 
    letter-spacing: 8px; 
 
} 
 

 
.a2017 { 
 
    font-size: 15px; 
 
    letter-spacing: 2px; 
 
} 
 

 
.coming_soon { 
 
    letter-spacing: 1px; 
 
}

<div class="wrapper"> 
 

 
    <img class="your_image" src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png"><br><br> 
 
    <p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br> 
 
    <span class="a2017">Welcome to 2017</span><br><br> 
 
    <span class="coming_soon">Coming Soon</span></p><br><br> 
 

 
</div>

出典

2017-05-14 16:35:38 Baro

ありがとうございます！しかし、テキストが長くなると、複数の行にまたがって展開されます。これは1行にする必要があります。これを解決する方法は？マージン左のテキストを使用している場合、モバイルビューでは一部が非表示になっています。 – Aman50

私はフレキシボックスを使用することを好みます。それはあなたが行う必要がある多くのコードを簡素化します。あなたの状況では

、ちょうどdivの中にHTMLコードをラップし、これはあなたのCSSを作る：

div{ 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 

.centeredimage { 
    display: block; 
    margin: 0 auto; 
    width: 200px; 
    height: 200px; 
     }

出典

2017-05-14 17:02:34 Darkisa

私は、画面の中央にロゴを整列すると、テキストはこれが私のHTMLコードで画像

答えて

関連する問題