yếu tố Align đến trung tâm của một phần tử

Đây là html của tôi:yếu tố Align đến trung tâm của một phần tử

.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>

Nếu bạn đặt chúng trong một thử nghiệm mã, cần có 4 hộp màu xanh bên trong một màu trắng nhưng vấn đề của tôi là tôi không thể có được tất cả 4 hộp để phù hợp với trung tâm của một màu trắng. Tôi đang cố gắng để có được padding trên tất cả các bên của hộp màu xanh là như nhau.

Nguồn

2016-11-13 VusicVoid

tập trung theo chiều dọc hoặc theo chiều ngang? – Gacci

Kính gửi @Vusic Void Xin đừng quên chấp nhận câu trả lời nếu có ai trả lời dưới đây là đúng, nó có thể là một nguồn cảm hứng cho người khác –

Chỉ cần sửa chữa text-align làm cho nó 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; 
}

Nguồn

2016-11-13 02:47:20

Hãy thử với câu trả lời này cung cấp cho ul text-align: center; nó sẽ làm cho trung tâm neo và thêm trang trí văn bản: dòng thông qua; để một thẻ mà làm cho dòng theo chiều dọc làm trung tâm

/* styleSheet */ 
 

 
.HCSI { 
 
\t background-color: #fff; 
 
\t height: auto; 
 
\t width: 100%; 
 
text-align:; 
 
\t position: fixed; 
 
\t left: 0; 
 
\t top: 0; 
 
\t z-index: 0; 
 
\t border: 2px solid #000; 
 
\t border-radius: 25px; 
 
} 
 
.HCSI ul { 
 
\t padding-left: 0; 
 
\t text-align: center; 
 
} 
 
.HCSI ul a { 
 
\t text-decoration:line-through; 
 
} 
 
.home, .csgo, .steam, .info { 
 
\t z-index: 1; 
 
\t background-color: rgba(50, 150, 250, 0.5); 
 
\t border: 2px solid #000; 
 
\t padding: 10px 15px; 
 
\t border-radius: 20px; 
 
\t float: center; 
 
} 
 
.home:hover { 
 
\t background-color: rgba(50, 150, 250, 1); 
 
} 
 
.HCSI, li { 
 
\t color: #000; 
 
\t padding: 0px; 
 
\t display: inline-block; 
 
\t font-size: 21px; 
 
\t font-weight: 100; 
 
\t letter-spacing: 2.5px; 
 
\t 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>

Nguồn

2016-11-13 02:53:20

là điều này giải quyết được vấn đề của bạn –

Nếu bạn muốn các hộp tập trung tại trung tâm với một khoảng cách định nghĩa này sẽ làm các trick

.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; 
}

Nếu bạn muốn các hộp trải đều trên thanh đồng đều, bạn có thể thêm các ô này thay vì

.HCSI ul { 
    display: table; 
    margin: 0 auto; 
    padding-left: 0; 
    width: 100%; 
} 

.HCSI ul a { 
    padding: 20px; 
    display: table-cell; 
    text-align: center; 
}

Nguồn

2016-11-13 02:54:25 mike

Bạn có thể sử dụng CSS Flexbox.

Chỉ áp dụng các thùng chứa Flex (display: flex) các thuộc tính với Flex Justify (justify-content: center) và Flex Alignment (align-items: center) Thuộc tính.

Có một cái nhìn về cách tôi đã sử dụng chúng trong các mã dưới đây:

/* 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>

Tìm hiểu thêm về CSS Flexbox

Hope this helps!

Nguồn

2016-11-13 08:19:34

yếu tố Align đến trung tâm của một phần tử

Trả lời

Các vấn đề liên quan