Как выровнять картинки по горизонтали?

ProgramBox

Как выровнять картинки по горизонтали?

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

#html #css

#HTML #css

Вопрос:

Привет, ребята, я просто хочу знать, как выровнять эти фотографии по горизонтали, потому что выровненные по вертикали я просто хочу выровнять по горизонтали спасибо, ребята

 img {
  border-radius: 50%;
}
table, th, td {
  border: 1px solid black;
	}
	.container {
	  position: relative;
	  width: 20%;
	}

	.image {
	  opacity: 1;
	  display: absolute;
	  width: 50%;
	  height: auto;
	  transition: .5s ease;
	  backface-visibility: hidden;
	}

	.middle {
	  transition: .5s ease;
	  opacity: 0;
	  position: absolute;
	  top: 50%;
	  left: 3%;
	  transform: translate(0%, -20%);
	  -ms-transform: translate(50%, 50%);
	  text-align: center;
	}

	.container:hover .image {
	  opacity: 0.5;
	}

	.container:hover .middle {
	  opacity: 1;
	}

	.text {
	  background-color: #dbe0dc;
	  color: black;
	  font-size: 16px;
	  padding: 10px 20px;
	}
	.column {
	  float: left;
	  width: 33.33%;
	  padding: 5px;
	}
}

 <div class="container">
<img src="https://cdn.iconscout.com/icon/free/png-256/avatar-375-456327.png" class="image" alt="Avatar" style="width:200px">
<div class="middle">
    <div class="text">Avatar sample</div>
  </div></div>
  <div class="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREEGUm8xTq6g_39HvAO-LDynq64MqzfEyHenC3E5Sz0Ci5DWck" class="image" alt="Avatar" style="width:200px">
<div class="middle">
    <div class="text">Avatar sample 2</div>
  </div>

Ответ №1:

Добавьте float: left; в классе container, как показано ниже, это будет работать….

 .container {
   position: relative;
   width: 20%;
   float: left;
}

Ответ №2:

Поехали:

добавлено text-align: center в тело
удалено position: absolute и width: 50% из .image
добавлено display: block и max-width: 50% в .image
добавлено display: inline-block в .container

 body {
  text-align: center;
}

img {
  border-radius: 50%;
}

table,
th,
td {
  border: 1px solid black;
}

.container {
  position: relative;
  width: 20%;
  display: inline-block;
}

.image {
  opacity: 1;
  display: block;
  max-width: 50%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate(0%, -20%);
  -ms-transform: translate(50%, 50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.5;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #dbe0dc;
  color: black;
  font-size: 16px;
  padding: 10px 20px;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}


}

 <div class="container">
  <img src="https://cdn.iconscout.com/icon/free/png-256/avatar-375-456327.png" class="image" alt="Avatar" style="width:200px">
  <div class="middle">
    <div class="text">Avatar sample</div>
  </div>
</div>


<div class="container">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREEGUm8xTq6g_39HvAO-LDynq64MqzfEyHenC3E5Sz0Ci5DWck" class="image" alt="Avatar" style="width:200px">
  <div class="middle">
    <div class="text">Avatar sample 2</div>
  </div>

1. Важное примечание : В зависимости от вашего общего проекта. Вы, вероятно, хотите удалить body {text-align: center} . Если вместо этого вы добавите margin: auto в .image , изображения будут центрированы внутри соответствующих столбцов.

Ответ №3:

Вот код, этот код работает идеально

CSS :

         img {
      border-radius: 50%;
    }
    table, th, td {
      border: 1px solid black;
        }
        .container {
          position: relative;
          width: 20%;
        }

        .image {
          opacity: 1;
          display: absolute;
          width: 50%;
          height: auto;
          transition: .5s ease;
          backface-visibility: hidden;
        }

        .middle {
          transition: .5s ease;
          opacity: 0;
          position: absolute;
          top: 50%;
          left: 3%;
          transform: translate(0%, -20%);
          -ms-transform: translate(50%, 50%);
          text-align: center;
        }

        .container:hover .image {
          opacity: 0.5;
        }

        .container:hover .middle {
          opacity: 1;
        }

        .text {
          background-color: #dbe0dc;
          color: black;
          font-size: 16px;
          padding: 10px 20px;
        }
        .column {
          float: left;
          width: 33.33%;
          padding: 5px;
        }

    }

    body ul li {
        list-style: none;
        display: inline-block;
    }

HTML :

 <ul>
    <li>
        <div class="container">
            <img src="https://cdn.iconscout.com/icon/free/png-256/avatar-375-456327.png" class="image" alt="Avatar" style="width:200px">
            <div class="middle">
                <div class="text">Avatar sample</div>
             </div>
        </div>
    </li>

    <li>
        <div class="container">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREEGUm8xTq6g_39HvAO-LDynq64MqzfEyHenC3E5Sz0Ci5DWck" class="image" alt="Avatar" style="width:200px">
            <div class="middle">
                <div class="text">Avatar sample</div>
             </div>
        </div>
    </li>

</ul>

Ответ №4:

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

HTML

 <div class="icon-container">
  <div class="container">
    <img src="https://cdn.iconscout.com/icon/free/png-256/avatar-375-456327.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">Avatar sample</div>
    </div>
  </div>
  <div class="container">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREEGUm8xTq6g_39HvAO-LDynq64MqzfEyHenC3E5Sz0Ci5DWck" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">Avatar sample 2</div>
    </div>
  </div>
</div>

CSS:

 .icon-container {
  display: flex;
}