Как выровнять элементы на фоне?

Я пытаюсь сделать домашнюю страницу на своем сайте с четырьмя круглыми кнопками подряд, и я хочу, чтобы они были на горизонтальной линии, которая нарисована на фоновом изображении. Конечно, я хочу, чтобы они оставались выровненными по линии, даже когда окна браузера менялись, но я понятия не имею, как это сделать или если это возможно.Как выровнять элементы на фоне?

Я пробовал работать с процентами как на фоне, так и на кнопках, но кнопки изменяются в верхнем левом углу, поэтому они не остаются даже на фоне.

EDIT - получил почти работает, единственная проблема, у меня есть то, что она не выравнивая идеально на процентах, когда окно действительно мало кнопки идут немного под линией, и когда окно больше кнопка немного выше линии.

Мой HTML

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <link rel="stylesheet" href="css/style.css" type="text/css"/> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body id="menu-body"> 
    <div id="menu-div"> 
     <h1></h1> 
     <div id="menu"> 
      <a href="" class="menu-link"><img src="" alt="" class="menu-img"/></a> 
      <a href="" class="menu-link"><img src="" alt="" class="menu-img"/></a> 
      <a href="" class="menu-link"><img src="" alt="" class="menu-img"/></a> 
      <a href="" class="menu-link"><img src="" alt="" class="menu-img"/></a> 
     </div> 
    </div> 
</body> 
</html>

Мой CSS

#menu-body { 
    background-image: url('../img/background.png'); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    background-color: #1B1B1B; 
} 

#menu-div { 
    width: 100%; 
} 

#menu { 
    width: 100%; 
} 

.menu-img { 
    float: left; 
    width: 24%; 
    margin-top: 15%; 
}

источник

2015-05-22 Laurens Smid

вы можете создать плункер с вашим html/или просто включить html в вопрос - хотите ли вы, чтобы кнопки также были вертикально выровнены? – Ruben

Я хочу, чтобы они выравнивались по горизонтали –

в соответствии с кодом, который вы отправили, и предоставили вам эти теги значение, которое они выровнены в левом верхнем углу экрана. не то, что вы ищете? – Ruben

дать им свойство плавать: слева;

источник

2015-05-22 22:26:20 Ruben

Я не уверен, что здесь ваша цель, но простое решение использует свойство gud'ol flexbox. Вы можете установить контейнер с закругленными кнопками с помощью «display: flex», «justify-content: center» и «flex-wrap: nowrap», которые показывают, что они выравниваются, но удаляют проценты, просто оставляют там якоря и видят, что случается.

источник

2015-05-22 23:15:38 syrano

Спасибо за ваш ответ. Я пробовал это, но он не работает, он сначала ставит кнопки по вертикали, я играл с гибкостью и контентом, но это не сработало. –

Как выровнять элементы на фоне?

ответ

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