我想在屏幕中心對齊標誌和image.But文本與圖像

重合後立即顯示幾行這是我的HTML代碼：我想在屏幕中心對齊標誌和image.But文本與圖像

<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

我使用此代碼中心的東西在屏幕的中間，例如，裝載機。它可以有多個部分，沒關係。你只需把所有的部分放到一個div中。我曾經使用「邊緣」技巧，並且仍然在這裏和那裏做，但是現在我使用table/tablecell來完成工作。它可以在任何地方工作，手機等（注意我不處理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

謝謝你的工作！但是當文本很長時，它會擴展到多行。它應該在一行。如何解決？如果我使用邊距保留文本的某些部分隱藏在移動視圖中。 – Aman50

我更喜歡使用Flexbox的。它簡化了很多你需要做的編碼。

在你的情況，只是包裝你的HTML代碼中的一個div，使這個你的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

我想在屏幕中心對齊標誌和image.But文本與圖像

回答

相關問題