Центрировать Img по вертикали в Div

Я пытаюсь центрировать изображение в div, но никакие методы не работают. Я пытался использовать margin: auto; и многие другие популярные методы, но они не работают.

<style>
/* Add a black background color to the top navigation */
.topnav {
  background-color: #1F363D;
  overflow: hidden;

}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #BBBBBB;
  color: #1F363D;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #808782;
  color: white;

}

body{
    margin: 0px;
}

a{
    font-family: monospace;
}

h1 {
    font-family: monospace;
}

.header {
    text-align: center;
    background-color: #000088;
    color: white;
    padding: 5px;
}

img{
    width: 100px;
    height: 100px;

    border-style: solid;
    border-color: black;
    border-radius: 10%;
    border-weight: 1px;
    vertical-align: middle;
}

.grid-holder {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
    grid-templete-rows: 100px 100px 100px 100px;
    gap: 20px;
    height: 100%;
    width: fit-content;
    margin: auto;
    pading: 5px;

    border-style: solid;
  border-width: 1px;
    border-color: black;
    border-radius: 10px;
}

#mastermind-holder {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;

}

#simon-holder {
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
}

.grid-item{
    text-align: center;
    padding: 5px;
    border-style: solid;
    border-color: black;
    border-radius: 10%;
    border-weight: 1px;
    width: 100px;

}

.grid-item a {
    border-style: solid;
    border-color: black;
    border-radius: 10%;
    border-weight: 1px;
}
</style>

<!DOCTYPE html>
<html>

<head>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width">
  <title>Portfolio - Projects</title>
  <link href = "style.css" rel = "stylesheet" type = "text/css" />

</head>

<body>
    <div class = "header">
        <h1>Portfolio</h1>
    </div>
  <div class = "topnav">
    <a href = "/index.html">Home</a>
    <a class = "active" href = "/projects.html">Projects</a>
    <a href = "#contact">Contact</a>
    <a href = "#about">About</a>
    </div>




    <div class = "grid-holder">

        <div class = "grid-item" id = "mastermind-holder">
            <div class = "image-holder">
                <img src = "/mastermind-icon.png">
            </div>
            <a>Mastermind</a>
        </div>

        <div class = "grid-item" id = "simon-holder">
            <img href = "">
            <a>Simon</a>
        </div>


    </div
  <script src = "script.js"></script>
</body>

</html>

Обратите внимание, несколько строк в вашем css написаны с ошибками. вес границы = ширина границы? прокладка = прокладка? сетка-шаблон-строки = сетка-шаблон-строки? Что касается изображений, какое изображение вы пытаетесь центрировать, в чем?

— 05.04.2022 18:30

@Stoff, я вижу, у вас есть редактирование, ожидающее утверждения, почему бы не включить это в свое редактирование?

— 05.04.2022 18:38

@Stoff, спасибо за это. Редактор, который я использую, не очень полезен, когда дело доходит до этого.

— 05.04.2022 19:02

@tb_03, короткие предложения, используйте инструмент разработчика вместо редактора, у редактора нет сильной функциональности для поиска ошибок

— 05.04.2022 19:17

@James Вы должны знать, что это поле предназначено не для обсуждения, а для ответа на ваш вопрос - OP может быть полезно знать, что они не работают. Следовательно, я упомянул об этом, чтобы он знал о них — вместо того, чтобы, возможно, использовать тот же код где-то еще. Не знаю, почему это нужно объяснять.

— 05.04.2022 20:35

html css css-grid

05.04.2022 18:21

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать display:flex в родительском контейнере изображения, который является image-holder, и использовать align-item:center, чтобы он мог выравниваться по вертикали.

Я немного отредактировал вашу ширину для img, чтобы лучше показать цель.

/* Add a black background color to the top navigation */
.topnav {
  background-color: #1F363D;
  overflow: hidden;
    
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #BBBBBB;
  color: #1F363D;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #808782;
  color: white;

}

body{
    margin: 0px;
}

a{
    font-family: monospace;
}

h1 {
    font-family: monospace;
}

.header {
    text-align: center;
    background-color: #000088;
    color: white;
    padding: 5px;
}

img{
    max-width: 100px;
    max-height: 100px;
    padding:30px;
    
    
    border-style: solid;
    border-color: black;
    border-radius: 10%;
    border-weight: 1px;
    vertical-align: middle;
   
}

.image-holder{
     display: flex;
     align-items: center;
}
.grid-holder {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
    grid-templete-rows: 100px 100px 100px 100px;
    gap: 20px;
    height: 100%;
    width: fit-content;
    margin: auto;
    pading: 5px;

    border-style: solid;
  border-width: 1px;
    border-color: black;
    border-radius: 10px;
}

#mastermind-holder {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    
}

#simon-holder {
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
}

.grid-item{
    text-align: center;
    padding: 5px;
    border-style: solid;
    border-color: black;
    border-radius: 10%;
    border-weight: 1px;
    width: 100px;

}

.grid-item a {
    border-style: solid;
    border-color: black;
    border-radius: 10%;
    border-weight: 1px;
}

    <div class = "header">
        <h1>Portfolio</h1>
    </div>
  <div class = "topnav">
    <a href = "/index.html">Home</a>
    <a class = "active" href = "/projects.html">Projects</a>
    <a href = "#contact">Contact</a>
    <a href = "#about">About</a>
    </div>




    <div class = "grid-holder">
        
        <div class = "grid-item" id = "mastermind-holder">
            <div class = "image-holder">
             <img src = "/mastermind-icon.png">
            </div>
            <a>Mastermind</a>
        </div>
        
        <div class = "grid-item" id = "simon-holder">
            <img href = "">
            <a>Simon</a>
        </div>

You could use display:grid and place-item:center on parent element as well.

/* Add a black background color to the top navigation */
.topnav {
  background-color: #1F363D;
  overflow: hidden;
    
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #BBBBBB;
  color: #1F363D;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #808782;
  color: white;

}

body{
    margin: 0px;
}

a{
    font-family: monospace;
}

h1 {
    font-family: monospace;
}

.header {
    text-align: center;
    background-color: #000088;
    color: white;
    padding: 5px;
}

img{
    max-width: 100px;
    max-height: 100px;
    padding:30px;
    
    
    border-style: solid;
    border-color: black;
    border-radius: 10%;
    border-weight: 1px;
    vertical-align: middle;
   
}

.image-holder{
     display: grid;
    place-content: center;
}
.grid-holder {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
    grid-templete-rows: 100px 100px 100px 100px;
    gap: 20px;
    height: 100%;
    width: fit-content;
    margin: auto;
    pading: 5px;

    border-style: solid;
  border-width: 1px;
    border-color: black;
    border-radius: 10px;
}

#mastermind-holder {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    
}

#simon-holder {
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
}

.grid-item{
    text-align: center;
    padding: 5px;
    border-style: solid;
    border-color: black;
    border-radius: 10%;
    border-weight: 1px;
    width: 100px;

}

.grid-item a {
    border-style: solid;
    border-color: black;
    border-radius: 10%;
    border-weight: 1px;
}

<div class = "header">
        <h1>Portfolio</h1>
    </div>
  <div class = "topnav">
    <a href = "/index.html">Home</a>
    <a class = "active" href = "/projects.html">Projects</a>
    <a href = "#contact">Contact</a>
    <a href = "#about">About</a>
    </div>




    <div class = "grid-holder">
        
        <div class = "grid-item" id = "mastermind-holder">
            <div class = "image-holder">
             <img src = "/mastermind-icon.png">
            </div>
            <a>Mastermind</a>
        </div>
        
        <div class = "grid-item" id = "simon-holder">
            <img href = "">
            <a>Simon</a>
        </div>

05.04.2022 18:31

Другие вопросы по теме

Удалить box-shadow из компонента Vuetify

Вытягивание данных строки на боковую панель Google Sheets с последующей заменой новых введенных данных в исходную выбранную строку

Как я могу складывать кнопки друг над другом, используя flex box

Изменить смещение постепенного появления при просмотре javascript

Якорные ссылки не перенаправляют на правильную позицию на веб-странице

Использование Toggle для изменения макета HTML-страницы

Как разместить изображения рядом друг с другом с центрированными ссылками под ними?

Я неправильно реализую javascript?

Позиция: абсолютная; Внизу: 0; Справа: 0; элемент перемещается, когда родительский div становится прокручиваемым с помощью overflow:auto;

Показать раздел только в указанном медиа-запросе

Центрировать Img по вертикали в Div

Ответы 1

Другие вопросы по теме

Похожие вопросы