HTML/CSS：如何使div內的文本自動居中對齊

-1

這可能是一個愚蠢的問題，但我很難弄清楚這一點。我有一些可以在高度上變化的動態內容。在此之下，我有一排靜態圖像，但附有圖像的動態文本。我想將文本附加到中心的div上，並且每當動態內容ABOVE發生變化時，都會相應地壓下此div，並將文本固定在中心。我也希望將文字固定在右側。現在，我已經手動將文字設置在中間位置，但這顯然不起作用，因爲只要屏幕或內容發生更改，圖像就會被按下，而不是文本。HTML/CSS：如何使div內的文本自動居中對齊

https://jsfiddle.net/t1z4tn47/2/

#text { 
 
    position: absolute; 
 
    right: 540px; 
 
    top: 100px; 
 
} 
 

 
#number { 
 
    position: absolute; 
 
    right: 470px; 
 
} 
 

 
#wrapper { 
 
    display: inline-block; 
 
}

<div id="somecontent"> 
 
    some dynamic content here, height will vary and always push the wrapper div below 
 
</div> 
 
<div id="wrapper"> 
 
    <img src="https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png" alt=""> 
 
    <span id="text">HELLO</span> 
 
    <span id="number">#1</span> 
 
</div> 
 

 
<img src="http://www.callrail.com/wp-content/upload/2016/05/Yellow-200x200.jpg" alt="">

來源

2016-07-15 Hello

能否請你讓一組片段？編輯你的問題，然後從問題中剪下html並點擊工具欄中的按鈕。粘貼你的HTML，以及CSS。我無法從這裏訪問jsfiddle，並且我徹底弄糊了你想要居中的內容以及在哪個軸上。 – Sumurai8

-1

編輯以符合以下

見小提琴https://jsfiddle.net/t1z4tn47/8/

我加position: relative;到包裝的意見，這會讓你查nge子元素相對於包裝的絕對定位。因此，如果您在頂部添加文本並且框向下移動，則數字和文本將隨之移動。

#text{ 
    position:absolute; 
    right: 50%; 
    top: 50%; 
    margin-top: -8px; 
    margin-right: -26px; 
} 

#number{ 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

#wrapper{ 
    display:inline-block; 
    position: relative; 
}

來源

2016-07-15 17:05:56

我希望「HELLO」處於藍色圖像的中間，藍色圖像右上方的「＃1」 – Hello

@你好，這裏是https://jsfiddle.net/t1z4tn47/8/ –

它只會適用於大小相同的文本，但這就是主意。你可以使用'text-align：center;'來自動居中文本。 –

您可以使用翻譯轉換集後文本的位置 http://www.w3schools.com/css/css3_2dtransforms.asp

#wrapper{ 
 
    position: relative; 
 
} 
 
#text{ 
 
    position:absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#number{ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
} 
 

 
#wrapper{ 
 
    display:inline-block; 
 
}

來源

2016-07-15 20:21:13 Kawatare267

HTML/CSS：如何使div內的文本自動居中對齊

回答

相關問題