Question

我有以下HTML / CSS / JS：

<div class="container">
  <div class="full-width">
<iframe class="video-iframe fullsize" src="yyy" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    <a href="#section2">
      <span class="dot">
        <i class="arrow-down"></i>
      </span>
    </a>
  </div>
  <div class="half-width" id="section2">
    <div class="half-width-content">
      <div class="half-width-text">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr
        um. Stet clita kasd gubergren, no sea takimata sanctus est</p>
        <p>akimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  </div>
  <div class="half-width">
    <div class="half-width-content">
      <div class="instagram-slideshow">
        <img class="slide" src="http://placekitten.com/200/300">
        <img class="slide" src="https://placeimg.com/640/480/animals">
        <img class="slide" src="http://placekitten.com/200/300">
      </div>
    </div>
  </div>
  <div class="half-width">
    div 3
  </div>
  <div class="half-width">
    div 4
  </div>
</div>

CSS：

body {
  margin:0;
}
.container {
  display:flex;
  flex-wrap:wrap;    
  flex-direction:row;  
  height:100vh;
}
.container > div {
  min-height: 100vh;
  border:1px solid black;
  box-sizing:border-box;
}
.container > div > a > .dot{
  position: relative;
  transition: background .2s linear;
  left: 50%;
  bottom: 10%;
  z-index: 101;
    height: 25px;
  width: 25px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
}
.container > div > a  > .dot > .arrow-down {
  transition: border .2s linear;
  position: absolute;
  top:11%;
  left: 24%;
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
}
.container > div > a .dot:hover{
  background: black;
}
.container > div > a .dot:hover > .arrow-down{
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 5px;
}
.container > div > a > .dot > .arrow-down{
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.container > div .content{
  height: 100vh;
  width: 100vw;
}
.full-width {
  width:100%;              
}
.half-width {
  width:50%;
}

div > .content{
  background: green;
}
.video-iframe.fullsize{
  height: 100%;
  width: 100%;
}

.list{
  list-style: none;
  text-align: center;
}

.half-width > .half-width-content{
  height: 100%;
  width: 100%;
}
.half-width > .half-width-content > .instagram-slideshow{
  position: relative;
  height: 100%;
  width: 100%;
}
.half-width > .half-width-content > .instagram-slideshow > img{
  position: absolute;
  width: 100%;
  height: 100%;
}

.half-width > .half-width-content > .half-width-text{
  position: abolute;
  margin: auto auto;
  height: 75%;
  width: 75%;
  background: red;
}

JS（使用jQuery）：

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("slide");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1} 
    slides[slideIndex-1].style.display = "block"; 
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}

我尝试使div half-width-text在所有四个方向上都具有相同的边距，以使其宽度和高度为其父级的75％为中心。首选的解决方案是像我尝试使用margin auto来获得响应行为那样的东西。
我已经尝试过将flex与方向行一起使用。

有人可以帮我吗？

Answer 1

请为“ .half-width-text”类尝试以下操作：-

.half-width > .half-width-content > .half-width-text{
  position: relative;
  margin: auto auto;
  height: 75%;
  width: 75%;
  background: red;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%); 
}

父级中的HTML div中心对齐不起作用

1 个答案: