Выровнять элементы в центре другого элемента

Это мой 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 коробки для выравнивания с центром белого. Я пытаюсь получить простыню со всех сторон синих ящиков, чтобы они были одинаковыми.

источник

2016-11-13 VusicVoid

сцентрированный по вертикали или по горизонтали? – Gacci

Уважаемые @Vusic Void Пожалуйста, не забудьте принять ответ, если кто-либо из приведенных ниже ответов прав, это может быть вдохновение для других. –

Просто исправить 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; 
}

источник

2016-11-13 02:47:20

Попробуйте этот ответ дают уль выравнивания текста: центр; он сделает центр якорей и добавит text-decoration: line-through; к тегу, который делает линию вертикально центрированный

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

источник

2016-11-13 02:53:20

- это решение вашей проблемы –

Если вы хотите коробки кластерные в центре с определенным зазором это будет делать трюк

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

источник

2016-11-13 02:54:25 mike

Вы можете использовать CSS Flexbox.

Просто примените контейнер Flex (display: flex) с помощью Flex Justify (justify-content: center) и Flex Alignment (align-items: center).

Посмотрите на то, как я использовал их в коде ниже:

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

Надеется, что это помогает!

источник

2016-11-13 08:19:34

Выровнять элементы в центре другого элемента

ответ

Смежные вопросы