Первое, что я заметил, вы используете точку внутри имени вашего идентификатора. Это проблема, так как в css точка является частью селектора класса.
Правило #CSS.Logo {...} применяется к элементу, который имеет оба, идентификатор «CSS» и класс «Logo». Примерно так:
<div id="CSS" class="Logo">
...
</div>
В вашем коде нет такого элемента, поэтому правила CSS не применяются.
Во-вторых, ваш исходный код CSS не подходит для центрирования изображениявнутри другого контейнера.
// This is your original code as you posted it:
img {
margin: auto;
align-content: center;
}
Правило align-content применимо только в контейнере flex box. Однако вы можете использовать поля для центрирования изображения по горизонтали следующим образом:
img {
display: block;
margin: 0 auto;
}
Вместо этого вы, вероятно, захотите вот что:
<div id="center-logo">
<img src="your-image.png" alt="Center Circle">
</div>
body {
margin: 0; // making sure you have the whole page at your disposal
}
#center-logo {
height: 100vh; // using the full height of the viewport
// this is where the actual centering happens:
display: flex; // this is necessary for the following 3 rules (flex box)
flex-flow: row nowrap; // in this case this could also be column nowrap
align-items: center; // vertical center
justify-content: center; // horizontal center
img {
// set a width and height so the image does not stretch and to avoid repositioning
// the image (or other content if there is any) as soon as the image has been loaded
width: 250px;
height: 250px;
}
}
Обратите внимание, я использовал маленькие буквы дляid name, потому что это обычно помогает избежать проблем, вызванных неправильным написанием имен впоследствии.