Краткий вопрос о централизации изображения - Новичок здесь

ProgramBox

Краткий вопрос о централизации изображения — Новичок здесь

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#html

Вопрос:

новичок в HTML здесь.

У меня есть небольшой вопрос о выравнивании изображения для централизации — наведение курсора на тень показывает, что мое изображение находится всего в нескольких пикселях справа: Пример 1

Еще Один Пример

Мой HTML — код выглядит следующим образом. Заранее спасибо!!

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

div.gallery:hover {
 box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease-in-out;  
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  font-family: 'Open Sans'
  padding: 0px;
padding-top: 10px;
font-size: 18px;
  color: #03308D;
  text-align: center;
}

div.desc2 {
  font-family: 'Open Sans'
  padding: 20px;
padding-top: 5px;
padding-bottom: 20px;
font-size: 14px;
  color: #03308D;
  text-align: center;
}


.responsive {
  padding: 20px;
  float: left;
  width: 50%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 50%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="www.google.com">
      <img src="https://rmkcdn.successfactors.com/a6c5af8d/019942b5-bb07-49d5-ad5b-4.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc"> <b> Graduate Associates </b> <br/></div>
<div class="desc2">Description<br/> </div>
  </div>
</div>

</body>
</html>

Также сообщите, есть ли какие-либо избыточные HTML-коды в приведенном выше фрагменте, заранее спасибо!

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

Ответ №1:

Он центрирован в вашем коде, его можно увидеть, используя цвет фона.
если он не центрирован, где вы его используете, либо используйте :

Измените размер изображения в соответствии с необходимостью , здесь используется маленький только для демонстрации, измените div.gallery img {width: 50%;} для этого

 .gallery a{
display: flex;
justify-content: center;
align-items: center;
}

Как в приведенном ниже фрагменте кода (используется цвет, чтобы удалить область, покрытую элементом, и показать, центрирована она или нет)

 * {
  box-sizing: border-box
}

div.gallery a {
  display: flex;
  align-items: center;
  flex-flow: column;
  background-color: blue;
}

div.gallery:hover {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease-in-out;
}

div.gallery img {
  width: 50%;
  height: auto;
}

div.desc {
  font-family: 'Open Sans' padding: 0px;
  padding-top: 10px;
  font-size: 18px;
  color: #03308D;
  text-align: center;
}

div.desc2 {
  font-family: 'Open Sans' padding: 20px;
  padding-top: 5px;
  padding-bottom: 20px;
  font-size: 14px;
  color: #03308D;
  text-align: center;
}

.responsive {
  padding: 20px;
  float: left;
  background-color: red;
  width: 100%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 50%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

 <div class="responsive">
  <div class="gallery">
    <a target="_blank" href="www.google.com">
      <img src="https://rmkcdn.successfactors.com/a6c5af8d/019942b5-bb07-49d5-ad5b-4.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc"> <b> Graduate Associates </b> <br/></div>
    <div class="desc2">Description<br/> </div>
  </div>
</div>

или

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

как в приведенном ниже фрагменте

 * {
  box-sizing: border-box
}

div.gallery:hover {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease-in-out;
}

div.gallery img {
  width: 50%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

div.desc {
  font-family: 'Open Sans' padding: 0px;
  padding-top: 10px;
  font-size: 18px;
  color: #03308D;
  text-align: center;
}

div.desc2 {
  font-family: 'Open Sans' padding: 20px;
  padding-top: 5px;
  padding-bottom: 20px;
  font-size: 14px;
  color: #03308D;
  text-align: center;
}

.responsive {
  padding: 20px;
  float: left;
  background-color: red;
  width: 100%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 50%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

 <div class="responsive">
  <div class="gallery">
    <a target="_blank" href="www.google.com">
      <img src="https://rmkcdn.successfactors.com/a6c5af8d/019942b5-bb07-49d5-ad5b-4.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc"> <b> Graduate Associates </b> <br/></div>
    <div class="desc2">Description<br/> </div>
  </div>
</div>

Некоторые дополнительные margin/padding элементы могут быть добавлены на некоторые стороны, которые создают некоторую разницу в пикселях

1. Спасибо, Рана! Первый код полностью изменяет размеры изображения, в то время как 2-й код не оказывает никакого эффекта

2. Вы должны добавить flex-flow: column в первую очередь

3. Показано, что изображение центрировано с использованием flex приведенного выше ответа . Использовал несколько дополнительных строк кода

4. Также заведите привычку использовать *{box-sizing: border-box} для устранения основных проблем переполнения содержимого из его контейнера

Метки: Краткий вопрос о централизации изображения — Новичок здесь