What Does Img[Class*="Align"] Mean in CSS

CSS: How to align an image right without its cutting into the bottom?

You need to clear the float.

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

add that class to a containing div for the <img>

Example:

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

.square {
  width: 100px;
  height: 100px;
  background: yellow;
}

before
<div class="square"></div>
after
<hr> before
<div class="clearfix">
  <div class="square" style="float:right"></div>
</div>

after
<hr> before
<div class="square" style="float:right"></div>
after
<hr>

What is the correct CSS for aligning images?

You can, try this https://jsfiddle.net/uxvg0kod/ and its responsive

HTML

<div class="subSection">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/350x150">
</div>

CSS

.subSection {
  text-align: center;
}

.subSection img {
  display: inline-block;
  vertical-align: middle;
  width: 30%;
}

Line up img and div css

The default vertical alignment of inline elements is baseline, so you want something like bottom instead, and also remove the height on your box div (unless you want it 100px tall, which your example image doesn't show):

vertical-align: bottom;

Example:

.Box {  display: inline-block;}
.myDiv {  background: blue;  width: 100px;  color: white;}
img {  margin: 0px !important;  padding: 0px !important;  width: 100px;  height: 100px;  background: red;  vertical-align: bottom;}

<div class="Box">  <div class="myDiv">    Content  </div></div><div class="Box">  <img src="https://i.ytimg.com/vi/2VLDkNjAUBU/maxresdefault.jpg" /></div>

how to put an icon on an image with Php CSS?

Set position: relative; on .image. Then set a class on the parent div for the icon. I called it .icon-wrapper. Set this parent to position: absolute; with top: 0;. Then you can use width and height: 100%; so it falls directly on top of your .image div.

Then you can use display: flex; with align-items: center; and justify-content: center; on .icon.wrapper to align the icon vertically and horizontally.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  min-height: 100vh;
  background-color: #191C24 !important;
}

.container h1 {
  font-size: 40px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: normal;
  padding: 15px;
  color: #333;
  text-align: center;
  text-transform: capitalize;
}

.container .image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  padding: 10px;
}

.container .image-container .image {
  height: 250px;
  width: 350px;
  border: 10px solid #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
  overflow: hidden;
  cursor: pointer;
  float: left;
}

.linkDelete {
  float: left;
  clear: left;
}

.container .image-container .image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: .2s linear;
}

.container .image-container .image a {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: .2s linear;
}

.container .image-container .image:hover img {
  transform: scale(1.1);
}

.container .popup-image {
  position: fixed;
  top: 50px;
  left: 0px;
  background: rgba(0, 0, 0, .9);
  height: 100%;
  width: 100%;
  z-index: 100%;
  display: none;
}

.photo-name {
  position: absolute;
  width: 100%;
  bottom: 30px;
  text-align: center;
  background-color: cyan;
}

/* .image-container{
            position:relative;
        }

        .image-container a{
            position:absolute;
            bottom:0px;
            right:0px;
        } */

.container .popup-image span {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 60px;
  font-weight: bolder;
  color: #fff;
  cursor: pointer;
  z-index: 100;
}

.container .popup-image img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid #333;
  border-radius: 5px;
  width: 75%;
  object-fit: cover;
}

@media (max-width:768px) {
  .container .popup-image img {
    width: 95%;
  }
}

i {
  font-size: 3em;
  color: red;
}

.image {
  position: relative;
}

.icon-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<script src="https://kit.fontawesome.com/6140596fcb.js" crossorigin="anonymous"></script>

<div class="container">
  <h1>Image Galerry</h1>
  <div class="image-container">
    <div class="image">
      <img src="https://dummyimage.com/300/000/fff" alt="Sample Image">
      <div class="icon-wrapper">
       <i class="fa-solid fa-trash"></i>
      </div>
    </div>
    <div class="linkDelete" style="font-size: 13px;position:absolute;text-align:center; width:26px; padding-top:3px">
      <a href="http://">Delete</a>
    </div>
  </div>
  <div class="popup-image">
    <span>×</span>
    <img src="Media/3-20220714-68033.jpg" alt="Sample Image">
  </div>
</div>

How to vertically align an image inside a div

The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.

So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {    height: 25px;      /* Equals maximum image height */    width: 160px;    border: 1px solid red;    white-space: nowrap; /* This is required unless you put the helper span closely near the img */
    text-align: center;    margin: 1em 0;}
.helper {    display: inline-block;    height: 100%;    vertical-align: middle;}
img {    background: #3A6F9A;    vertical-align: middle;    max-height: 25px;    max-width: 160px;}

<div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=17px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=15px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=13px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=11px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=9px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=7px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=5px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

---

Related Topics