Alignment in css and setting text width-CodePudding

I have created below CSS and HTML to create a circle and setting images and text the issue which facing in the alignment of center images and text width

Below is my code

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .zoom {
    transition: transform .2s;
    /* Animation */
  }
  
  .zoom:hover {
    transform: scale(1.5);
    /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }
  
  .Title {
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
  }
  
  .circle-container {
    position: relative;
    width: 30em;
    height: 28em;
    padding: 2.8em;
    /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
    border: double 1px;
    border-radius: 50%;
    margin: 1.75em auto 0;
    border-color: #0f69af !important;
  }
  
  .circle-container a {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4em;
    height: 4em;
    margin: -2em;
  }
  
  .circle-container img {
    display: block;
    width: 100%;
  }
  
  .deg0 {
    transform: translate(12em);
  }
  /* 12em = half the width of the wrapper */
  
  .deg45 {
    transform: rotate(45deg) translate(12em) rotate(-45deg);
  }
  
  .deg135 {
    transform: rotate(135deg) translate(12em) rotate(-135deg);
  }
  
  .deg180 {
    transform: translate(-12em);
  }
  
  .deg225 {
    transform: rotate(270deg) translate(12em) rotate(-270deg);
  }
  
  .deg315 {
    transform: rotate(315deg) translate(12em) rotate(-315deg);
  }
</style>


<div >
  <a href="#" >
    <div ><img src="/Topic/CoEPlatform/EVASites/PublishingImages/whoweare.jpg" alt="">&nbsp;</div>
  </a>
  <a href="#" >
    <div >
      <div >Lorem ipsum dolor sit amet</div><img src="" alt=""></div>
  </a>
  <a href="#" >
    <div >
      <div >Lorem ipsum dolor sit amet</div><img src="" alt=""></div>
  </a>
  <a href="#" >
    <div >
      <div >Lorem ipsum dolor sit amet</div><img src="" alt=""></div>
  </a>
  <a href="#" >
    <div >
      <div >Lorem ipsum dolor sit amet </div><img src="" alt=""></div>
  </a>
  <a href="#" >
    <div >
      <div >Lorem ipsum dolor sit amet</div><img src="" alt=""></div>
  </a>
</div>

which give me below output

Issues which facing is

Center images (left and right) should be aligned in center so it does not overlap bottom images on hover
Text on Images should come in two lines currently its comes in 4-5 line.
All images and text should come inside circle ,currently bottom images comes outside border

I tried setting height width of container but it does not worked

CodePudding user response：

For 1 you can easily adjust the element's position since it's positioned absolute and its parent is also a positioned element. You can adjust the top property to align the two of them to your preferred layout.

To achieve 2 you can achieve it albeit with overflows if your paragraph is too long for the container's width. See this SO post for your reference: Wrap a text within only two lines inside div. Basically add the following code to your CSS:

.zoom>div {
  line-height: 1.5em;
  height: 3em;       /* height is 2x line-height, so two lines will display */
  overflow: hidden;  /* prevents extra lines from being visible */
}

Lastly, for number 3, to fit the images inside the circle-container you can just increase its padding till the images do not overflow, else you can also set an overflow property for it in the case that it does.

See the snippet below:

.zoom {
  transition: transform .2s;
  /* Animation */
}

.zoom>div{
  line-height: 1.5em;
  height: 3em;
  font-size: 8px;
  overflow: hidden;
}

.zoom:hover {
  transform: scale(1.5);
  /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.Title {
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
}

.circle-container {
  position: relative;
  width: 30em;
  height: 28em;
  padding: 5em;
  /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
  border: double 1px;
  border-radius: 50%;
  margin: 1.75em auto 0;
  border-color: #0f69af !important;
  display: flex;
}

.circle-container a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em;
}

.circle-container img {
  display: block;
  width: 100%;
}

.deg0 {
  transform: translate(13em);
  top: 40% !important;
}


/* 12em = half the width of the wrapper */

.deg45 {
  transform: rotate(45deg) translate(12em) rotate(-45deg);
}

.deg135 {
  transform: rotate(135deg) translate(12em) rotate(-135deg);
}

.deg180 {
  transform: translate(-13em);
  top: 40% !important;
}

.deg225 {
  transform: rotate(270deg) translate(12em) rotate(-270deg);
}

.deg315 {
  transform: rotate(315deg) translate(12em) rotate(-315deg);
}

<div >
  <a href="#" >
    <div ><img src="https://cdn.pixabay.com/photo/2022/01/28/18/32/leaves-6975462_960_720.png" alt="">&nbsp;</div>
  </a>
  <a href="#" >
    <div >
      <div >Lorem ipsum dolor sit amet</div><img src="https://cdn.pixabay.com/photo/2017/07/07/22/18/frame-2482970_960_720.png" alt=""></div>
  </a>
  <a href="#" >
    <div >
      <div >Lorem ipsum dolor sit amet</div><img src="https://cdn.pixabay.com/photo/2017/07/07/22/18/frame-2482970_960_720.png" alt=""></div>
  </a>
  <a href="#" >
    <div >
      <div >Lorem ipsum dolor sit amet</div><img src="https://cdn.pixabay.com/photo/2017/07/07/22/18/frame-2482970_960_720.png" alt=""></div>
  </a>
  <a href="#" >
    <div >
      <div >Lorem ipsum dolor sit amet </div><img src="https://cdn.pixabay.com/photo/2017/07/07/22/18/frame-2482970_960_720.png" alt=""></div>
  </a>
  <a href="#" >
    <div >
      <div >Lorem ipsum dolor sit amet</div><img src="https://cdn.pixabay.com/photo/2017/07/07/22/18/frame-2482970_960_720.png" alt=""></div>
  </a>
</div>