Question

是否有更好的方法来使文本标题居中嵌套在CSS网格项（可以是“ justify-items：开始/结束/等”）中的图像上

我喜欢该示例在Safari和Chrome中的呈现方式，但是在Firefox中，该图像溢出了父div。任何帮助将不胜感激！谢谢：）

Firefox Example (Image spilling out of parent div)

<body>
  <div class="container-main"><article id="post-number-1">
       <div class="standard-container-1">
    <div class="caption-1"><a href="/home">CENTERED CAPTION 1</a></div>
    <img src="https://images.unsplash.com/photo-1516472096803-187d3339b36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"></div>
    </article>

    <article id="post-number-2">
       <div class="standard-container-1">
    <div class="caption-1"><a href="/home">CENTERED CAPTION 2</a></div>
    <img src="https://images.unsplash.com/photo-1516472096803-187d3339b36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"></div>
    </article>


  </div>
    <!-- container-main -->

</body>

<style>
body {
    padding: 0;
    margin: 0;
}

.container-main {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(10, 9vw);
  grid-auto-rows: 9vw;
  margin: 0 0 0px 0;
  padding: 0;
  min-width: 0; 
  padding: 5vw 5vw 15vw 5vw;    
  min-width: 0; 
  background-color: teal;
}

.container-main  article {
  border: 3px solid black;  
}

.container-main article .standard-container-1 {
  position: relative;
  max-height: 100%;
  max-width: 100%;
}

.container-main article .standard-container-1 .caption-1 {
    min-width: 80%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}


.container-main article .standard-container-1 .caption-1 a {
  color: #0f0;
  font-family: sans-serif;
}


.container-main article .standard-container-1 img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;
}

.container-main article#post-number-1 {
    display:grid;
    align-items: start;
    justify-items: start;
    grid-column: 1 / 4;  
    grid-row:    1 / 4 ;
}

.container-main article#post-number-2 {
    display:grid;
    align-items: start;
    justify-items: end;
    grid-column: 8 / 11;  
    grid-row:    1 / 4 ;
}

</style>

图像溢出到CSS Grid项目中的父div之外（仅Firefox）

0 个答案: