HTML 相對於元素對齊中心，而不是網頁布局
[英]HTML align center with respect to the element, not the webpage layout
問題描述
<!DOCTYPE html>
<html>
<head>
<title>HTML demo</title>
</head>
<body>
<div style="text-align:left;">
A B C D E F G
</div>
<div style="text-align:center;">
D
</div>
</body>
</html>
如果我希望第二個元素 D 位於（居中）AB C DEFG 的正下方，該怎么辦？ 我的方式，D位於網頁的中心。
2 個解決方案
解決方案1
1 2022-02-04 00:22:08
將它們都放在一個 inline-block 元素中：
<:DOCTYPE html> <html> <head> <title>HTML demo</title> </head> <body> <div style="display:inline-block"> <div style="text-align;left:"> AB C DEFG </div> <div style="text-align;center;"> D </div> </div> </body> </html>
解決方案2
0 2022-02-04 00:28:03
第二種解決方案：您可以在這些 div 周圍包裹一個容器元素並應用display: inline-flex , flex-direction: column; 和align-items: center; 到那個容器。
display: inline-flex , 將容器的寬度限制為內容, flex-direction: column; 將孩子放在彼此下方，並align-items: center; 將子元素內的內容居中。 在這種情況下，您不需要內聯文本對齊。
.container { display: inline-flex; flex-direction: column; align-items: center; }
<!DOCTYPE html> <html> <head> <title>HTML demo</title> </head> <body> <div class="container"> <div> AB C DEFG </div> <div> D </div> </div> </body> </html>
HTML / CSS：如何將鏈接鏈接到另一個網站與網頁中心->嘗試在CSS中將鏈接鏈接到中心…無效
[英]HTML / CSS: How to align link to another website to Center of Webpage --> Tried Align Link to Center in CSS … did not work
中心的HTML對齊圖例元素在Internet Explo和FireFox中不起作用
[英]HTML align legend element in the center doesnt work in internet expl and firefox
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.