Блог

Главная - Вопросы по программированию - Выровнять два блока внутри div, который сам выровнен по центру

Выровнять два блока внутри div, который сам выровнен по центру

#html #css

#HTML #css

Вопрос:

Я пытаюсь выровнять div по центру шириной 1000 пикселей, а затем внутри указанного div выровнять фрагмент текста на 10 пикселей от левого края и выровнять изображение прямо по середине, но у меня возникают проблемы. Текст смещен с левой стороны экрана, а изображение расположено слева от экрана.

Я не понимаю, что я здесь сделал не так. Я уверен, что решение ошеломляюще очевидно, и я просто туплю.

 <!DOCTYPE html>
<html>
<head>
<style>

body {
margin: 0;
padding: 0;
background-color:red;
}

div#headerinner {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1000px;
}

img.header {
position:absolute;
display: block;
margin-left: auto;
margin-right: auto;
}

span#login {
position: absolute;
left: 10px;
}

</style>
</head>
<body>
<div id="headerinner">
<span id="login">Welcome!</span>

<img class="header" src="mysite/heading.png" alt="Header">

</div>

</body>
</html>

Ответ №1:

если вы задаете position: absolute, вы не можете установить margin-left: auto; и margin-right: auto; для этого элемента. таким образом

 img.header {
  display: block;
  margin-left: auto;
  margin-right: auto;
           }

Ответ №2:

Просто удалите position:absolute из этого class img.header 

 img.header {
    /*position:absolute;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
}

скрипка