垂直对齐(Flexbox)和中心对齐有问题 [英] Having issues with vertical alignment (Flexbox) and center alignment

问题描述

我正在使用JavaScript来显示动态文本和图像，但是在格式化方面遇到了麻烦.

1. 我正在使用display:flex将文本和图像彼此相邻放置，但是在水平对齐时遇到了麻烦.现在，它看起来像:

但是我想水平对齐它们，使其变为:

我尝试了以下方法，但这没用

  #conA#容器{显示:flex;flex-direction:行；证明内容:中心；align-items:居中;} 

更新:

实施以下代码，但不要将#heroText和#images的高度设置为相同

  #conA#容器{显示:flex;flex-direction:行；证明内容:中心；align-items:居中;} 

当同时出现时，

会将文本和图像水平居中.但是，一旦图像消失，文本就会跳转.这是

2. 我还希望将整个文本+图片放在父div(#conA，占据全屏100vh)的中心.我尝试了以下方法:

     #conA {职位:相对}#conA#容器{位置:绝对；最高:50％；左:50％；转换:translate(-50％，-50％);} 

但是看起来奇怪，b/c文本根据是否显示图像而不断移动/跳跃.因此，当没有图像时，它看起来像:

当图像出现时，文本向左移动，以便使整个内容居中:

如何在此处固定文本的位置?我希望当有图像时整个事情都集中在中间.因此，当没有图像时:

有图片时:

html

 <部分id ="conA">< div id =容器">< div id ="heroText">< div id =固定文本">是固定文本</div>.< div id =文本">//div</div>< div id ="images">/div</div></section> 

css

  #conA {高度:100vh；职位:相对}#conA#容器{边距:0;}#conA #text {显示:初始；右边框:3px实线#56525E;}#heroText {行高:1.7；font-size:30px;宽度:800像素；}#conA#容器{边距:0;显示:flex;}#heroText {高度:400px；}#conA #images {高度:400px；}#conA img{显示:无；高度:400px；}#conA img.invisible{可见性:隐藏；}#conA img.show{显示:内联;}#conA img.anim1{动画时间:2000毫秒；}#conA img.anim2{动画时间:2000毫秒；}#conA img.anim3{动画时间:2000毫秒；}.淡入{动画名称:fadeIn;}@keyframes fadeIn{0％{不透明度:0;}100％{不透明度:1;}}.逐渐消失{动画名称:fadeOut;} 

用于动态显示文本和图像的javascript代码

 //句子列表var _CONTENT = [我是第一句话."，我是第二句话."，我是第三句话"，我是第四句话".];var IMAGE_URLS = ['img/image1.png'，'img/image2.jpg'，'img/image3.png'，'img/image1.png'，'img/image2.png'，'img/image3.png'，'img/image4.png'，'img/image5.png'];var IMAGES = jQuery.map(IMAGE_URLS，函数(url，索引){var img = document.createElement('img');img.setAttribute('src'，url);img.classList.add('anim'+((index％2)+1));img.classList.add('fadeOut');document.getElementById('images').appendChild(img);返回img;});//正在处理的当前句子var _PART = 0;//正在处理的当前句子的字符编号var _PART_INDEX = 0;//保留从setInterval返回的句柄var _INTERVAL_VAL;//包含文本的元素var _ELEMENT = document.querySelector(#text");//实现打字效果函数Type(){var text = _CONTENT [_PART] .substring(0，_PART_INDEX + 1);_ELEMENT.innerHTML =文字；_PART_INDEX ++;//如果已显示完整句子，则一段时间后开始删除该句子if(text === _CONTENT [_PART]){var imgIndexBase = _PART * 2;IMAGES [imgIndexBase] .classList.remove('fadeOut');IMAGES [imgIndexBase + 1] .classList.remove('fadeOut');setTimeout(function(){IMAGES [imgIndexBase] .classList.add('fadeIn');}，0);setTimeout(function(){IMAGES [imgIndexBase] .classList.add('show');}，0);setTimeout(function(){IMAGES [imgIndexBase] .classList.add('fadeOut');}，2000)；setTimeout(function(){IMAGES [imgIndexBase] .classList.remove('fadeOut');}，3000);setTimeout(function(){IMAGES [imgIndexBase] .classList.remove('show');}，3000);setTimeout(function(){IMAGES [imgIndexBase + 1] .classList.add('fadeIn');}，0);setTimeout(function(){IMAGES [imgIndexBase + 1] .classList.add('show');}，0);setTimeout(function(){IMAGES [imgIndexBase + 1] .classList.add('fadeOut');}，2000)；setTimeout(function(){IMAGES [imgIndexBase + 1] .classList.remove('fadeOut');}，3000);setTimeout(function(){IMAGES [imgIndexBase + 1] .classList.remove('show');}，3000);clearInterval(_INTERVAL_VAL);setTimeout(function(){_INTERVAL_VAL = setInterval(Delete，50);}，4000)；}}//实现删除效果函数Delete(){var text = _CONTENT [_PART] .substring(0，_PART_INDEX-1);_ELEMENT.innerHTML =文字；_PART_INDEX--;//如果句子已删除，则开始显示下一个句子if(text ===''){clearInterval(_INTERVAL_VAL);//如果最后一个句子则显示第一个，否则移至下一个if(_PART ==(_CONTENT.length-1))_PART = 0;别的_PART ++;_PART_INDEX = 0;//一段时间后开始显示下一个句子setTimeout(function(){_INTERVAL_VAL = setInterval(Type，100);}，500)；}}//在加载时开始输入效果_INTERVAL_VAL = setInterval(Type，100); 

解决方案

请参见下面的使用flex CSS的示例.第一部分包含图片，第二部分在 .images div中没有​​图片.

关于flex的解释很多，但是在动态布局方面它非常强大.希望这能使您走上正确的轨道.

此外，您还需要放宽 id 属性的用法，有效的html仅允许一次使用 id 属性值.将 class 属性用于多个实例，将 id 用于单个用法实例.

id 属性值只能使用一次，不能多次使用.

  BODY {填充:1rem;边距:0;}部分.container {边框:1px黑色实心；填充:2rem;显示:flex;align-items:居中;flex-wrap:包装;flex-direction:初始；最低高度:100像素；证明内容:中心；底边距:1rem;}部分.container .hero-text {宽度:50％;背景:青色；}部分.container .images {宽度:50％;背景:红色；}部分.container .images IMG {显示:块；宽度:100％;}  

 < section>< div class ="container">< div class ="hero-text">< div class ="text-fixed">我是固定文本</div>< div class ="text">而且我热爱生活:)</div></div>< div class ="images">< img src ="https://i.imgur.com/q5Y5RCH.png" alt ="/></div></div></section>< section>< div class ="container">< div class ="hero-text">< div class ="text-fixed">我是固定文本</div>< div class ="text">而且我热爱生活:)</div></div>< div class ="images"><！-无图像-></div></div></section>  

I'm using javascript to display dynamic text and image, but having trouble with formatting.

1. I'm using display: flex to put text and image next to each other, but am having trouble horizontally aligning them. Right now, it looks like:

But I'd like to horizontally align them so that it becomes:

I've tried the following, but this didn't work

  #conA #container {
    display: flex;
      flex-direction: row;    
    justify-content: center; 
    align-items: center;   
  } 

Update:

Implementing the following code but NOT setting the height of #heroText and #images the same

  #conA #container {
        display: flex;
          flex-direction: row;    
        justify-content: center; 
        align-items: center;   
      } 

does center text and images horizontally when both are present. However, once the images disappear, the text jumps. Here's how it's behaving https://imgur.com/a/7yYl8zO I'd like the text to not move when images disappear

Once I set the heights of #heroText and #images the same, it then turns to this:

2. I'm also looking to center the whole text+image in the parent div (#conA, which takes up full screen 100vh). I tried the following:

     #conA  {
     position: relative;  
      }
   
      #conA #container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      }
   

But it looks odd b/c text keeps moving/jumping depending on whether there's an image displayed. So when there's no image, it looks like:

When when images appear, text moves to left so that the whole thing becomes centered:

How can I fix the position of text here? I'd like the whole thing is centered when there's an image. So when there's no image:

When there's an image:

html

<section id="conA">
<div id="container">
  <div id="heroText">
    <div id="text-fixed">I'm a fixed text</div>
    <div id="text"></div>
  </div>
  <div id="images"></div>
</div>
</section>

css

#conA {
  height: 100vh;
  position: relative;
}


#conA #container {
  margin: 0;
}


#conA #text {
  display: initial;
  border-right: 3px solid #56525E;
}


  #heroText {
  line-height: 1.7;
  font-size: 30px;
  width: 800px;
  }


  #conA #container {
    margin: 0;
    display: flex;
  }

  #heroText {
    height: 400px;
  }


  #conA #images {
    height: 400px;
} 



#conA img
{
  display:none;
  height: 400px;
}

#conA img.invisible
{
  visibility: hidden;
}

#conA img.show
{
  display:inline;
}

#conA img.anim1
{
  animation-duration: 2000ms;
}

#conA img.anim2
{
  animation-duration: 2000ms;
}

#conA img.anim3
{
  animation-duration: 2000ms;
}


.fadeIn
{
  animation-name: fadeIn;
}

@keyframes fadeIn 
{
 0% {opacity: 0;}
 100% {opacity: 1;}
}

.fadeOut
{
  animation-name: fadeOut;
}

javascript code for dynamic display of text and image

// List of sentences
var _CONTENT = [ "I'm the first sentence.", "I'm the second sentence."
, "I'm the third sentence.", "I'm the fourth sentence." ];


var IMAGE_URLS = ['img/image1.png', 'img/image2.jpg', 'img/image3.png', 'img/image1.png','img/image2.png','img/image3.png', 'img/image4.png','img/image5.png'];

var IMAGES = jQuery.map(IMAGE_URLS, function (url, index){ 
  var img = document.createElement('img'); 
  img.setAttribute('src', url); 
  img.classList.add('anim'+((index%2)+1)); 
  img.classList.add('fadeOut'); 
  document.getElementById('images').appendChild(img); 
  return img;
}); 

// Current sentence being processed
var _PART = 0;

// Character number of the current sentence being processed 
var _PART_INDEX = 0;

// Holds the handle returned from setInterval
var _INTERVAL_VAL;

// Element that holds the text
var _ELEMENT = document.querySelector("#text");

// Implements typing effect
function Type() { 
  var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
  _ELEMENT.innerHTML = text;
  _PART_INDEX++;

  // If full sentence has been displayed then start to delete the sentence after some time
  if(text === _CONTENT[_PART]) {

  var imgIndexBase = _PART*2;
    IMAGES[imgIndexBase].classList.remove('fadeOut');
    IMAGES[imgIndexBase+1].classList.remove('fadeOut');
    setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeIn'); }, 0);
    setTimeout(function () { IMAGES[imgIndexBase].classList.add('show'); }, 0);
    setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeOut'); }, 2000);
    setTimeout(function () { IMAGES[imgIndexBase].classList.remove('fadeOut'); }, 3000);
    setTimeout(function () { IMAGES[imgIndexBase].classList.remove('show'); }, 3000);
    setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('fadeIn'); }, 0);
    setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('show'); }, 0);
    setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('fadeOut'); }, 2000);
    setTimeout(function () { IMAGES[imgIndexBase + 1].classList.remove('fadeOut'); }, 3000);
    setTimeout(function () { IMAGES[imgIndexBase + 1].classList.remove('show'); }, 3000);




    clearInterval(_INTERVAL_VAL);
    setTimeout(function() {
      _INTERVAL_VAL = setInterval(Delete, 50);
    }, 4000);

  }
}




// Implements deleting effect
function Delete() {
  var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
  _ELEMENT.innerHTML = text;
  _PART_INDEX--;

  // If sentence has been deleted then start to display the next sentence
  if(text === '') {
 


    clearInterval(_INTERVAL_VAL);

    // If last sentence then display the first one, else move to the next
    if(_PART == (_CONTENT.length - 1))
      _PART = 0;
    else
      _PART++;
    _PART_INDEX = 0;

    // Start to display the next sentence after some time
    setTimeout(function() {
      _INTERVAL_VAL = setInterval(Type, 100);
    }, 500);
  }
}

// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);

解决方案

See example below using flex CSS. First section with image, second section with no images in .images div.

There is a lot to explain with flex, but it is super powerful when it comes to dynamic layout. Hope this gets you on the right track.

Also you need to relax on your id attribute usage, valid html only allow single usage of an id attribute value. Use class attribute for multiple instances, and id for single usage instances.

id attribute value should only ever be used once, never multiple times.

BODY {
  padding: 1rem;
  margin: 0;
}

SECTION .container {
  border: 1px black solid;
  padding: 2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: initial;
  min-height: 100px;
  justify-content: center;
  margin-bottom: 1rem;
}

SECTION .container .hero-text {
  width: 50%;
  background: cyan;
}

SECTION .container .images {
  width: 50%;
  background: red;
}

SECTION .container .images IMG {
  display: block;
  width: 100%;
}

<section>
  <div class="container">
    <div class="hero-text">
      <div class="text-fixed">I'm a fixed text</div>
      <div class="text">And I am loving life :)</div>
    </div>
    <div class="images">
      <img src="https://i.imgur.com/q5Y5RCH.png" alt="" />
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="hero-text">
      <div class="text-fixed">I'm a fixed text</div>
      <div class="text">And I am loving life :)</div>
    </div>
    <div class="images">
      <!-- no images -->
    </div>
  </div>
</section>

这篇关于垂直对齐(Flexbox)和中心对齐有问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！