How can I center this image inside of this div?-CodePudding

How can I center this image that I have in this div in a way that it won't move the 'line' div? I want the line to be touching the top of the square too.

.black {
  background: black;
}

.square {
  width: 200px;
  height: 500px;
  margin: 37px auto;
  border-radius: 2px;
}

.image {
height: 60px;
width: 60px;
}

.line {
  width: 4px;
  height: 500px;
  background-color: red;
}

<div >
    <div >  
        <img  src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
                <div >
        <div ></div>
      <div ></div>
        </div>
        </div>

CodePudding user response：

Here is one way to prevent it from disrupting the flow layout of your container:

you can make the container a position of relative, and the image a position of absolute, positioned off the top and left by 50%, then transform it so that the center of the image is in the center position.

You could also just make the image a background-image of the div instead of using an image element, which may be easier to manipulate.

.black {
  background: black;
}

.square {
  position: relative;
  width: 200px;
  height: 500px;
  margin: 37px auto;
  border-radius: 2px;
}

.image {
  height: 60px;
  width: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.line {
  width: 4px;
  height: 500px;
  background-color: red;
}

<div >
  <div >
    <img  src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
    <div >
      <div ></div>
      <div ></div>
    </div>
  </div>
</div>

CodePudding user response：

I'm not sure I understand your exact desired end goal. But, if I understand correctly, you could create a flex parent to justify the image, and then position the line absolutely within that. See -

.black {
  background: black;
}

.square {
  width: 200px;
  height: 500px;
  margin: 37px auto;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.image {
  height: 60px;
  width: 60px;
}

.line {
  width: 4px;
  background-color: red;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0
}

  <div >
    <div ></div>
    <img  src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
  </div>

CodePudding user response：

You can just use these css for .square and .image

        .square {
            width: 200px;
            height: 500px;
            margin: 37px auto;
            border-radius: 2px;

            position: relative;
        }

        .image {
            height: 60px;
            width: 60px;

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

CodePudding user response：

You can easily center a image by using CSS position absolute. By making the position of square black class "absolute" and apply to properties "top: 45%;" and "left: 47%" . By applying this your problem will be definitely solve.

.black {
  background: black;
}

.square {
  display: flex;
  align-item: center;
  justify-content: center;
  width: 200px;
  height: 500px;
  border-radius: 2px;
}

.image {
height: 60px;
width: 60px;

}

<div >
    <div >  
       <img  src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
    </div>
</div>

.black {
  background: black;
}

.square {
  position: absolute;
  top: 45%;
  left: 47%;
  width: 200px;
  height: 500px;
  margin: 37px auto;
  border-radius: 2px;
}

.image {
height: 60px;
width: 60px;
position: absolute;
top:50%;
left:50%;
}

.line {
  width: 4px;
  height: 500px;
  background-color: red;
}

<div >
    <div >  
        <img  src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
                <div >
        <div ></div>
      <div ></div>
        </div>
        </div>

.black {
  background: black;
}

.square {
  width: 200px;
  height: 500px;
  margin: 37px auto;
  border-radius: 2px;
}

.image {
height: 60px;
width: 60px;
}

.line {
  width: 4px;
  height: 500px;
  background-color: red;
}

<div >
    <div >  
        <img  src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
                <div >
        <div ></div>
      <div ></div>
        </div>
        </div>