將元素與另一個元素的中心對齊
[英]Align elements to the center of another element
問題描述
這是我的HTML：
.HCSI { background-color: #fff; height: auto; width: 100%; text-align: ; position: fixed; left: 0; top: 0; z-index: 0; border: 2px solid #000; border-radius: 25px; } .home, .csgo, .steam, .info { z-index: 1; background-color: rgba(50, 150, 250, 0.5); border: 2px solid #000; padding: 10px 15px; border-radius: 20px; float: center; } .home:hover { background-color: rgba(50, 150, 250, 1); } .HCSI, li { color: #000; padding: 0px; display: inline-block; font-size: 21px; font-weight: 100; letter-spacing: 2.5px; word-spacing: 90px; }
<!DOCTYPE html> <html> <head> <title>VusicVoid</title> <link href="https://fonts.google.com/specimen/Shrikhand" rel="stylesheet"> </head> <body> <div class="HCSI"> <ul> <a href=""> <li class="home">Home</li> </a> <a href="http://store.steampowered.com/app/730/"> <li class="csgo">Csgo</li> </a> <a href=""> <li class="steam">Steam</li> </a> <a href=""> <li class="info">Info</li> </a> </ul> </div> </body> </html>
如果你把它們放在一個代碼測試器中，那么白色的盒子里面應該有4個藍色的盒子，但我的問題是我不能讓所有4個盒子與白色盒子的中心對齊。 我試圖讓藍色框的所有邊上的填充都相同。
4 個解決方案
解決方案1
2 2016-11-13 02:47:20
只需修復text-align使其成為text-align:center;
.HCSI {
background-color: #fff;
height: auto;
width: 100%;
text-align:center ;
position: fixed;
left: 0;
top: 0;
z-index: 0;
border: 2px solid #000;
border-radius: 25px;
}
解決方案2
2 2016-11-13 02:53:20
試試這個答案給出ul text-align：center; 它會使錨點居中並添加文字裝飾：直通; 到使線垂直居中的標簽
/* styleSheet */ .HCSI { background-color: #fff; height: auto; width: 100%; text-align:; position: fixed; left: 0; top: 0; z-index: 0; border: 2px solid #000; border-radius: 25px; } .HCSI ul { padding-left: 0; text-align: center; } .HCSI ul a { text-decoration:line-through; } .home, .csgo, .steam, .info { z-index: 1; background-color: rgba(50, 150, 250, 0.5); border: 2px solid #000; padding: 10px 15px; border-radius: 20px; float: center; } .home:hover { background-color: rgba(50, 150, 250, 1); } .HCSI, li { color: #000; padding: 0px; display: inline-block; font-size: 21px; font-weight: 100; letter-spacing: 2.5px; word-spacing: 90px; }
<!-- HTML --> <!DOCTYPE html> <html> <head> <title>VusicVoid</title> <link href="https://fonts.google.com/specimen/Shrikhand" rel="stylesheet"> </head> <body> <div class="HCSI"> <ul> <a href=""> <li class="home">Home</li> </a> <a href="http://store.steampowered.com/app/730/"> <li class="csgo">Csgo</li> </a> <a href=""> <li class="steam">Steam</li> </a> <a href=""> <li class="info">Info</li> </a> </ul> </div> </body> </html>
解決方案3
2 2016-11-13 08:19:34
您可以使用CSS Flexbox 。
只需使用Flex Justify（ justify-content: center ）和Flex Alignment（ align-items: center ）屬性應用Flex容器（ display: flex ）屬性。
看看我在下面的代碼中如何使用它們：
/* Parent Element (Flex Container) */ .HCSI { display: flex; justify-content: center; /* Center the content horizontaly */ padding: 20px; border: 2px solid #000; border-radius: 25px; } /* Resetting <ul> (Flex Container) */ ul { list-style: none; display: flex; justify-content: center; margin: 0; padding: 0; } /* <li> Styles */ ul li { color: #000; margin: 0 10px; font-size: 21px; font-weight: 100; letter-spacing: 2.5px; background-color: rgba(50, 150, 250, 0.5); border: 2px solid #000; border-radius: 20px; } /* <a> Styles */ ul li a { display: block; color: #000; padding: 10px 15px; border-radius: 18px; text-decoration: none; } /* <a> Hover Styles */ ul li a:hover { text-decoration: none; background-color: rgba(50, 150, 250, 1); }
<div class="HCSI"> <ul> <li class="home"><a href="">Home</a></li> <li class="csgo"><a href="http://store.steampowered.com/app/730/">Csgo</a></li> <li class="steam"><a href="">Steam</a></li> <li class="info"><a href="">Info</a></li> </ul> </div>
了解有關CSS Flexbox的更多信息
希望這可以幫助！
解決方案4
1 2016-11-13 02:54:25
如果你希望聚集在中心的盒子有一個明確的間隙，這就可以了
.HCSI ul {
display: table;
margin: 0 auto;
padding-left: 0;
}
.HCSI ul a {
/* Adjust this value to adjust the spacing around the buttons */
padding: 20px;
display: table-cell;
}
如果你想讓盒子均勻地分布在欄上，那么你可以添加它
.HCSI ul {
display: table;
margin: 0 auto;
padding-left: 0;
width: 100%;
}
.HCSI ul a {
padding: 20px;
display: table-cell;
text-align: center;
}
如何在不考慮浮動元素的情況下在元素中心對齊文本
[英]How to align text in the center of an element without considering floated elements
當其他元素居中對齊時，使用 Flexbox 將頁腳與頁面底部對齊
[英]Align footer to bottom of page with Flexbox when another elements aligned center
左對齊一個元素，居中對齊另一個元素，但居中元素被左元素推動
[英]Left-align one element and center-align another, but have centered element pushed by left element
Flexbox在頁面底部對齊一個元素中心和另一個元素中心
[英]Flexbox align one element center and another at the bottom of the page
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.